React 异步状态更新 setState 参数（函数与非函数）答案

【问题标题】：React Asynchronous State Updates setState argument (function vs non-function)React 异步状态更新 setState 参数（函数与非函数）
【发布时间】：2020-10-28 10:07:28
【问题描述】：

在状态和生命周期方法的官方 React 文档中，“状态更新可能是异步的： https://reactjs.org/docs/state-and-lifecycle.html

他们说当根据之前的状态更新状态时，我们应该传递一个函数给 setState() 来获取之前的状态作为第一个参数：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

很难想象“错误”的方式如何可能导致问题。什么是“错误”方式可能导致错误的代码示例？

【问题讨论】：

标签： reactjs

【解决方案1】：

对于这样的情况，只需一个电话setState 就没有错。然而，由于 React 批量状态更新，它不能保证工作。我可以举个简单的例子

this.setState({ count: this.state.count + 10 });
this.setState({ count: this.state.count + 1 });
//The end result is count+1 instead of count+11

//This will work correctly
this.setState((state) => ({count: state.count+10 }));
this.setState((state) => ({count: state.count+1 }));

Demo

【讨论】：