setState ReactJS 中的 this.state

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(prevState => ({counter: prevState.counter + 1}))
}