javascript - ReactJS 中的 prevState 是什么？

Question

我认为问这个问题可能很愚蠢，但请相信我，我是 reactJS 的初学者。有人能解释一下为什么我们在 ReactjS 中使用 prevState 吗？我努力去理解但失败了。

这是我的代码。请帮助我理解

 state = {
    placeName : '',
    places : []
}



placeSubmitHanlder = () => {
    if(this.state.placeName.trim()===''){
      return;
    }
    this.setState(prevState => {
      return {
        places : prevState.places.concat(prevState.placeName)
      };
    });
  };

Answer 1

prevState 是您为传递给 setState 回调函数的参数指定的名称。它保存的是 setState 被 React 触发之前的状态值；由于 setState 进行批处理，因此当您想根据先前的状态值更新新状态时，了解先前的状态有时很重要。

因此，如果多个 setState 调用正在更新同一个状态，批处理 setState 调用可能会导致设置不正确的状态。考虑一个例子:

state = {
   count: 0
}
updateCount = () => {
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
}

在上面的代码中，您可能期望 count 的值为 4，但它实际上是 1，因为最后一次调用 setState 将在批处理期间覆盖任何先前的值。解决此问题的一种方法是使用功能性 setState:

updateCount = () => {
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
}