Question

我正在使用以下方式实现功能更新。

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

尽管它可以工作，但我认为可能有更简单/更好的方法来使它工作。

Answer 1

这可能只是下面的一行语句。删除前两行，并在更新状态下使用responseSummary.status。

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

Answer 2

每当在React中处理状态时，让React为您处理更新几乎总是有意义的。看来您可以使用useState钩子并利用functional update表单根据先前的状态来更新您的状态：

// 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的预期形状应该是什么，但是如果您当前正在管理两个对象，那么更新{{ 1}}和domainValidationSummary同时使用，那么responseSummary将是另一个不错的选择。

实施反应功能更新的正确方法

2 个答案: