Правильный способ реализации функционального обновления реакции

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}));