javascript - React，如何仅更新使用 useState Hook 的对象中的一个属性？

Question

在我的代码中，我目前的状态如下:

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

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

计算函数返回一个如上所述的对象。我的问题是更新状态时是否始终必须设置完整的对象？例如，在我的 calculate 函数中，我可能只更新 next 变量:

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

我可以直接退回这个吗？:

return { next: someNewValue };

或者我总是需要返回完整的对象吗？

Answer 1

您需要像这样设置状态:

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

当你调用它时传递你想要修改的 key :

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