实现react功能更新的正确方法

Question

我使用以下方法来实现功能更新。

let domainValidationSummary = getDomainValidationSummary;
domainValidationSummary.status = responseSummary.status;
setDomainValidationSummary(prev=> ({...prev,...domainValidationSummary}));

虽然它有效，但我觉得可能有更简单/更好的方法让它发挥作用。

Answer 1

无论何时在React中处理状态，让React为您处理更新几乎总是有意义的。看起来您可以使用useState挂钩，并利用功能更新表单根据以前的状态更新您的状态：

// create domain with initial state
const [domainValidationSummary, setDomainValidationSummary] = React.useState({
status: null,
domainName: "",
validated: false
});
// this is just an example object to provide an example
const responseSummary = {
status: "complete",
domainName: "example",
validated: true,
};
setDomainValidationSummary((prev) => ({
...prev,
status: responseSummary.status,
domainName: responseSummary.domainName,
validated: responseSummary.validated,
}));

我不确定responseSummary来自什么或哪里，也不知道domainValidationSummary的预期形状应该是什么，但如果您当前正在管理两个对象，并且同时更新domainValidationSummary和responseSummary是有意义的，那么useReducer将是另一个很好的选择。

Answer 2

这可以只是一行语句，如下所示。删除前两行，并在更新状态下使用responseSummary.status。

// let domainValidationSummary = getDomainValidationSummary;
// domainValidationSummary.status = responseSummary.status;
setDomainValidationSummary(prev=> ({...prev, ...getDomainValidationSummary, status: responseSummary.status}));