[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)

First created: 2018-08-20 19:26:00
Last updated: 2021-11-15 Mon 10:18
Power by Emacs 27.1 (Org mode 9.4.4)