为何setState未生效？控制台打印this.state.isX始终为true

嘿，这个问题其实是React里非常常见的新手坑——setState是异步操作！咱们一步步拆解原因和解决办法：

为什么console.log(this.state.isX)始终是true？ #

React的setState并不会立刻修改this.state，它只是把状态更新的请求加入到一个队列中。React会在合适的时机（通常是当前事件循环结束后）批量处理这些更新，所以你在调用setState之后马上打印this.state，拿到的必然是更新前的旧状态值，也就是初始的true。

如何正确获取更新后的state？ #

有两种靠谱的方式：

方式一：使用setState的回调函数 #

setState支持第二个参数，这是一个回调函数，会在state更新完成、组件重新渲染后执行，在这里你就能拿到最新的state了：

handle(){
  this.setState(
    { value: 'X', isX: !this.state.isX },
    () => { console.log(this.state.isX); // 这里是更新后的值 }
  );
}

方式二：函数式setState（更推荐，尤其是新状态依赖旧状态时） #

如果你的新状态需要基于旧状态计算（比如这里的isX: !this.state.isX），更推荐用函数式的setState。它的参数是一个函数，接收prevState（更新前的最新状态）和当前的props，返回新的状态对象。这种方式能确保你始终基于最新的前状态来计算新值，避免异步批量更新带来的潜在问题：

handle(){
  this.setState(prevState => ({
    value: 'X',
    isX: !prevState.isX
  }), () => {
    console.log(this.state.isX); // 同样能拿到更新后的值
  });
}

补充说明 #

React设计异步的setState是为了性能优化——批量处理多个state更新可以减少组件重渲染的次数，提升应用性能。

内容的提问来源于stack exchange，提问作者Nguyễn Lâm