javascript - 更新时在对象上使用 useState Hook 时是否需要使用扩展运算符？

Question

我刚开始学习钩子(Hook)，根据 Using Multiple State Variables 上的官方文档，我们找到以下行:

However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

那么，如果我理解正确，这意味着我不需要使用扩展运算符来更新状态吗？

Answer 1

你仍然不想改变状态。因此，如果您的状态是一个对象，您将需要创建一个新对象并使用它进行设置。这可能涉及传播旧状态。例如:

const [person, setPerson] = useState({ name: 'alice', age: 30 });

const onClick = () => {
  // Do this:
  setPerson(prevPerson => {
    return { 
      ...prevPerson, 
      age: prevPerson.age + 1 
    }
  })
  // Not this:
  //setPerson(prevPerson => {
  //  prevPerson.age++;
  //  return prevPerson;
  //});
}

也就是说，使用钩子(Hook)你通常不再需要你的状态是一个对象，而是可以多次使用 useState。如果您不使用对象或数组，则不需要复制，因此也不需要传播。

const [name, setName] = useState('alice');
const [age, setAge] = useState(30);

const onClick = () => {
  setAge(prevAge => prevAge + 1);
}