[React] 不要在 this.setState 中使用 this.state

eslint 报错： error Use callback in setState when referencing the previous state react/no-access-state-in-setstate ， 之前看 React 官方文档的时候，隐约有类似的解释，但由于一直没遇到问题，所以就忘了。再次遇到决定记录一下。

---

在 React 的 this.setState 方法中不要使用 this.state 中的属性。 如果使用了，在页面批量调用该方法时，可能会引用了旧的 state 导致结果不符合预期（也就是说要无法保证原子性）。

一个经典的例子就是自增运算：

function increment() {
    this.setState({value: this.state.value + 1});
}

如果有两个 setState 操作同时执行时，可能出现下面这种情况：

setState({value: 1 + 1})
setState({value: 1 + 1})

那么 value 最后的值是 2 ，而实际程序期望的值是 3 。

为了避免这个问题，需要使用前一个 state 作为第一个参数：

function increment() {
    this.setState(prevState => ({value: prevState.value + 1}));
}

参考：Prevent using this.state within a this.setState (react/no-access-state-in-setstate)