反应，我如何只更新使用 useState 钩子的 object 中的一个属性？

Question

在我的代码中，我目前有一个 state ，如下所示：

const [caclulatorObj, setCalculatorObj] = useState({
  total: '0',
  next: null,
  operator: null
});

function clickHandler(isOperator, value) {
  setCalculatorObj(calculate(caclulatorObj, value));
}

如上所述，计算 function 返回 object。 我的问题是，在更新 state 时，我是否总是必须设置完整的 object？ 例如，在我calculate function 时，我可能只更新next变量：

return {
  total: calculatorObj.total,
  next: someNewValue,
  operator: calculatorObj.operator
}

我可以直接退货吗？：

return { next: someNewValue };

还是我总是需要退回完整的 object？

Answer 1

您需要像这样设置 state：

function clickHandler(isOperator, key, value) {
  setCalculatorObj(calculate(caclulatorObj, { ...calculatorObj, [key]: value}));
}

当您调用它时，传递您要修改的密钥：

onClick={(e) => clickHandler(false, 'next', e.target.value )}