ReactJS中的prevState是什么？

Question

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

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

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



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

Answer 1

prevState是您给传递给setState回调函数的参数指定的名称。它所保持的是setStateReact触发之前的状态值；由于进行了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}));
}

Answer 2

当您想用最后一个状态的参数覆盖当前状态时，可以使用它。

来自 React 文档：

根据 React 文档“setState()为了提高性能，React 可以将多个调用批处理为单个更新。因为this.props和this.state可能会异步更新，您不应该依赖它们的值来计算下一个状态。”

“要修复它，请使用setState()接受函数而不是对象的第二种形式。该函数将接收先前的状态作为第一个参数，并将更新应用时的道具作为第二个参数”

关联