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里面的this.state总是指向旧状态，并且只有在 setState 执行完后，它的值才会改变为新状态，而不是在它正在执行的时候。

Answer 1

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

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

这将允许您安全地增加当前状态值。

React 文档总结了为什么你不能依赖this.state在更新期间是准确的： https : this.state

Answer 2

setState接受一个函数作为参数，以前的状态作为参数。 重构如下以避免竞争问题：

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