ReactJS 中的 prevState 是什么

发布于02月21日

我觉得问这个问题可能很傻，但相信我，我是个新手.谁能给我解释一下为什么我们在ReactjS中使用prevState.我努力go 理解，但失败了.

Here is my code. Please Help me to understand

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



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

推荐答案

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的最后一次调用将在批处理期间覆盖之前的任何值.解决此问题的方法是使用函数设置状态:

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