小编典典

ReactJS中的prevState是什么?

reactjs

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

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

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



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

阅读 1034

收藏
2020-07-22

共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}));
}
2020-07-22