Question

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

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

OAuth2 Resource Server

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

Answer 2

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

来自React docs：

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

“要解决此问题，请使用setState()的第二种形式，该形式接受一个函数而不是一个对象。该函数将接收先前的状态作为第一个参数，并在应用更新时将props用作第二个参数”

Link

Answer 3

这里是一个带有注释代码的演示，为您提供更多信息：http://codepen.io/PiotrBerebecki/pen/rrGWjm

constructor() {
  super();
  this.state = {
    value: 0
  }
}

反应文档：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

[React ES6 class] API与React.createClass相似，但getInitialState除外。不用提供单独的getInitialState方法，而是在构造函数中设置自己的state属性。

prevState来自哪里？

prevState来自setState api：https://facebook.github.io/react/docs/component-api.html#setstate

还可以传递带有签名功能的功能（状态，道具）。在某些情况下，当您希望在设置任何值之前先加入一个查询state + props先前值的原子更新时，这可能会很有用。例如，假设我们要在状态下增加一个值：

this.setState(function(previousState, currentProps) {
  return {
     value: previousState.value + 1
  };
});

ReactJS中的prevState是什么？

3 个答案: