10

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

但是，与this.setState类不同，更新状态变量总是替换它而不是合并它。

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

4

2 回答 2

22

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

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;
  //});
}

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

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

const onClick = () => {
  setAge(prevAge => prevAge + 1);
}
于 2020-02-10T19:14:34.253 回答
17

这意味着如果你定义一个像这样的状态变量：

const [myThings, changeMyThings] = useState({cats: 'yes', strings: 'yellow', pizza: true })

然后你做类似changeMyThings({ cats: 'no' })的事情，结果状态对象就是{ cats: 'no' }. 新值不会合并到旧值中，它只是被替换。如果要维护整个状态对象，则需要使用扩展运算符：

changeMyThings({ ...myThings, cats: 'no' })

这将为您提供原始状态对象，并且只更新您更改的一件事。

于 2020-02-10T19:14:48.807 回答