React 调用 setState 后无法直接获取到 set 后的 state

#1
let {x} = this.state
console.log(x)
// => 1
this.setState({
  x: 2
})
console.log(this.state.x)
// => 1

我想知道有没有人知道这是为什么?如果获取新设置的 state 值?

#2
this.setState({
  x: 2
}, () => {
  console.log(this.state.x) // => 2
})
#3

要想能够立即获取this.state.x的值可以采用以下几种方式:

  1. setTimeout(() => { console.log(this.state.x);}, 0);
  2. this.setState({}, () => { console.log(this.state.x)};

具体原因可以看这些文章:

  1. setState何时同步更新状态
  2. setState:这个API设计到底怎么样
  3. setState api
#4

setState() 是异步操作哦,要使用回调函数 才能同步获取set 后的state

#5

又有人遇到这个坑了。setState()这个api官方的解释是:不保证setState调用后立即触发渲染,说它是异步也不太准确,它会排队合并setState。一般我们会避免调用setState之后,立即访问this.state。如果一定要这么实现,楼上几位已经给出了方法,回调等。看这里吧 React中文APisetState