Question

所以我对ReactJS中setState的异步特性有些困惑。根据React文档，您不应该在setState（）中使用this.state。但是，如果我有一个计数器作为状态，并且想要在单击时更新它，例如：

class App extends React.Component {
    state = { counter: 0 }

    onClick = () => {
        this.setState({counter: this.state.counter + 1})
    }

    render() {
        return (
          <div>
            <div>{this.state.counter}</div>
            <p onClick={this.onClick}>Click me</p>
          </div>
        )
    }
}

这按预期工作。那么为什么这段代码是错误的呢？

更新：我知道setState是异步的，并且它接受具有以前状态作为参数的回调，但是我不确定为什么要在这里使用它？我想引用setState中的旧状态，那么为什么在这种情况下我应该使用回调函数？每当执行this.setState()时，其内部的this.state将始终引用旧状态，并且其值将仅在setState完成执行后而不是在执行时更改为新状态。

Answer 1

您可以在setState调用中访问prevState：

this.setState((prevState) => ({
    counter: prevState.counter +1
}))

这将使您可以安全地增加当前状态值。

React文档总结了为什么在更新期间您不能依靠this.state来保持准确：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Answer 2

setState接受一个函数作为参数，并以先前的状态作为参数。为了避免竞争问题，请做如下修改：

onClick = () => {
    this.setState(state => ({counter: state.counter + 1}))
}

setState ReactJS中的this.state

2 个答案: