反應，我如何只更新使用 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 )}