所以我对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>
)
}
}
Run Code Online (Sandbox Code Playgroud)
这按预期工作.那么为什么这段代码错了呢?
更新:我知道setState是异步的,它接受一个回调,它有一个先前的状态作为参数,但我不知道为什么我应该在这里使用它?我想引用setState中的旧状态,那么为什么我应该在这种情况下使用回调函数呢?无论什么时候this.setState()执行,this.state它内部总是会引用旧状态,只有在setState完成执行后才会将其值更改为新状态,而不是在执行时.