Reactjs 为什么setState在这种情况下不起作用？

请帮帮我，当this.state.isX打印控制台的值始终为真时，我真的不明白。为什么setState在这种情况下不起作用。这是我的源代码`

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
      isX: true
    };
  }
  handle(){
    this.setState({value: 'X',isX:!this.state.isX});
    console.log(this.state.isX)
  }
  render() {
    return (
      <button className="square" onClick={() =>{this.handle()}}>
        {this.state.value}
      </button>
    );
  }
}

类Square扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：null，
是的
};
}
句柄（）{
this.setState（{value:'X'，isX:！this.state.isX}）；
console.log（this.state.isX）
}
render（）{
返回(
{this.handle（）}}>
{this.state.value}
);
}
}

设置状态是异步的；无法立即读回设置的值。如果你只是在登录前用计时器等一下，你会发现一切都很好。至少，我认为是这样

参考：

---

另外，次要的性能问题是：不要使用render（）中的箭头函数进行绑定；相反，始终将处理程序本身定义为箭头函数

这是因为

setState

是异步的。把它看作承诺：

handle(){
  new Promise((resolve) => {
    setTimeout(() => {
      resolve("success")
    }, 1000)
  }).then(result => {
    console.log(result);
  })
  console.log('this will be printed before "success"')
}

您知道，在承诺之后声明的代码将立即执行。

setState

也是如此

如果要确保代码在状态更新后执行，请使用回调函数：

handle(){
  this.setState({value: 'X',isX:!this.state.isX}, () => {
    console.log(this.state.isX)
  });
}

链接：

---

我尝试了这段代码，它在真与假之间交替切换。我也不确定您遇到了什么问题。我已经修复了它。非常感谢。现在我知道setState是异步的。非常感谢你。