在 React 中更新对象状态的特定字段

Question

我正在使用 React 功能组件，我只想更新状态的特定字段并像以前一样保留其他值。这是状态初始化 -

const[value, setValue] = React.useState({
     a: "5",
     b: "6"
});

我希望只将 'a' 的值更新为其他值，假设为 7（同时为 'b' 保留相同的值）。目前我正在这样做 -

setValue(currValue => ({
   ...currValue,
   a: "7"
}))

这是错误的吗？如果是，正确的做法是什么？

Answer 1

你的做法是正确的。

这是根据状态的当前值更新状态的正确方法。它被称为 setState 调用的函数形式。

setState((prevState) => {
  // Do something with prevState
  return newState; // Be aware to not mutate the prevState directly
});

示例：

// Array

setState((prevState) => {
  const newState = Array.from(prevState);
  newState.push('foo');
  return newState;
});

// Object

setState((prevState) => {
  return({
    ...prevState,
    foo: 'bar'
  });
});

主要是object/array引用要改！

在 React 中更新对象状态的特定字段

Updating a specific field of object state in React

reactjs

object

react-hooks

react-functional-component

react-state