React中setState运行机制疑问：调用后立即访问state未更新如何解决

核心执行逻辑 #

• setState在React合成事件、类组件生命周期函数的调用上下文里默认是异步批量更新的，不会立刻修改this.state，也不会立刻触发重渲染
• 所有setState调用会先存入更新队列，React会合并同一个上下文内的多次更新请求，等当前执行栈（当前触发的事件、生命周期逻辑）全部执行清空后，才会统一执行队列更新、修改state、触发重渲染
• 仅在setTimeout、原生DOM事件监听等React无法管控的异步场景中，setState才会同步修改state值

问题修复方案 #

代码中的问题是resetArray调用在setState之后的同步执行栈里，此时state更新还没执行，自然读取不到最新的numberOfbars值。只需要把resetArray放到setState的第二个回调参数中即可，这个回调会在state更新完成、重渲染结束后触发，此时可以拿到最新的state值：

handleBarsChange(value) {
  this.setState({numberOfbars: value}, () => {
    this.resetArray();
  });
}

其他获取更新后状态的方式 #

• 类组件中可以在componentDidUpdate生命周期函数内监听对应state的变化，执行后续逻辑
• 函数组件中可以使用useEffect钩子，将需要监听的state设为依赖项，state更新完成后会自动执行钩子回调

内容的提问来源于stack exchange，提问作者akash khamkar