setState ReactJS 中的 this.state

IT技术 javascript reactjs
2021-03-27 15:09:40

所以我对 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 执行完后，才会将其值更改为新状态，而不是在执行时。

2个回答

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

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

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

React 文档总结了为什么你不能this.state在更新过程中保持准确：https : //reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

请参阅官方文档中的示例：reactjs.org/docs/hooks-state.html他们使用的地方： <button onClick={() => this.setState({ count: this.state.count + 1 } )}> 点击我 </button> 所以我也像@maverick 一样困惑。
2021-05-27 15:09:40
@maverick 因为 React 可以并且将会批处理 setState 调用，所以无法保证在什么时候会触发该调用。这意味着它this.state可能会在错误的时间读取。利用回调是从访问以前的状态最安全的方式中的呼叫的setState。
2021-06-04 15:09:40
但是this.stateinside不是setState已经指代我代码中的先前状态了吗？那么为什么在这种情况下使用 setState 回调呢？
2021-06-09 15:09:40
React 文档总结了为什么你不应该this.state比我更好地依赖，他们甚至有一个反例。答案已更新
2021-06-11 15:09:40
我知道 setState 是异步的。这意味着它不会立即被调用。但是当它被调用时，this.state 仍将引用旧状态，这就是我在这种情况下想要访问的状态。this.state 将在 setState 执行完成后更新其值，但不会在执行时更新。
2021-06-20 15:09:40

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

onClick = () => {
    this.setState(prevState => ({counter: prevState.counter + 1}))
}
@maverick 由于setState是异步的，您不能假设这this.state是您更新的最后一个值。看看这个：stackoverflow.com/a/48209870/5735030。
2021-06-13 15:09:40
什么完成问题？你能给我举个例子吗？我知道 setState 接受回调，但我不确定为什么在这种情况下应该使用它？
2021-06-18 15:09:40
其它你可能感兴趣的问题
上一篇带有react的 ag-grid 中的可点击 url 值 下一篇React.js - 传递函数“不是函数”错误