Javascript ReactJS 中的 prevState 是什么？

What is prevState in ReactJS?

提问by Shubham Khatri

I think it might be silly question to ask but trust me I am beginner to reactJS . Could someone please explain me why we use prevStatein ReactjS . I tried hard to understand but failed .

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

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

回答by Shubham Khatri

prevStateis a name that you have given to the argument passed to setState callback function. What it holds is the value of state before the setStatewas triggered by React; Since setStatedoes batching, its sometimes important to know what the previous state was when you want to update the new state based on the previous state value.

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

So if multiple setState calls are updating the same state, batching setState calls may lead to incorrect state being set. Consider an example:

因此，如果多个 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});
}

In the above code you might expect the value of count to be 4 but it would actually be 1 since the last call to setState will override any previous value during batching. A way to solve this to use functional setState:

在上面的代码中，您可能期望 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}));
}

回答by S.Haviv

You use it when you want to override the current state with the last state's parameters.

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

From React docs :

来自 React 文档：

According to the React docs "React may batch multiple setState()calls into a single update for performance. Because this.propsand this.statemay be updated asynchronously, you should not rely on their values for calculating the next state."

"To fix it, use a second form of setState()that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument"

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

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

Link

关联

回答by Hardik Virani

Here is a demo with a commented-out code to give you more information: http://codepen.io/PiotrBerebecki/pen/rrGWjm

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

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

React docs: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

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

The [React ES6 class] API is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

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

Where does prevState come from?

prevState 来自哪里？

The prevState comes from the setState api: https://facebook.github.io/react/docs/component-api.html#setstate

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

It's also possible to pass a function with the signature function(state, props). This can be useful in some cases when you want to enqueue an atomic update that consults the previous value of state+props before setting any values. For instance, suppose we wanted to increment a value in state:

也可以传递带有签名 function(state, props) 的函数。在某些情况下，当您希望在设置任何值之前将查询 state+props 的先前值的原子更新排队时，这可能很有用。例如，假设我们想增加 state 中的一个值：

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