首页 文章

this.state在setState ReactJS中

提问于
浏览 次
0

所以我对ReactJS中setState的异步性质有些困惑 . 根据React docs，你不应该在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执行完毕后才将其值更改为新状态，而不是在执行时 .

javascript reactjs

2 回答

  • 0

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

    onClick = () => {
    this.setState(state => ({counter: state.counter + 1}))
}
    回复于
  • 2

    您可以在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

    回复于

相关问题