React中state渲染正常但方法内取值错误，setState异步问题求助

嘿，这个坑我刚学React的时候也踩过！核心原因是React的setState是异步执行的，不是你调用完就立刻更新state的。

为什么会出现这种现象？ #

先拆解你的代码片段：

componentWillMount() { 
  console.log(this.state); // 输出初始的0
  this.setState({ ...this.state, counter: this.state.counter + 1 }); 
  console.log(this.state); // 还是输出0，因为setState还没执行
} 
render() { 
  return <div>{this.state.counter}</div>; 
}

• 当你调用setState时，React不会立即修改this.state，而是把这个更新请求加入到更新队列中，等当前的生命周期函数（这里是componentWillMount）执行完毕后，才会批量处理队列里的更新任务。
• 所以两次console.log读取的都是更新前的原始state，自然都是0。
• 而render函数是在state更新完成后才触发的，所以页面能正确显示更新后的1。

你的答题应用问题的根源 #

你说答题应用里“已答正确答案数总是比实际值少1”，本质是同一个问题：
当你答对题目后调用setState更新正确数，但紧接着就同步读取this.state.correctCount来展示或者做其他逻辑，这时候拿到的还是更新前的旧值，所以显示的数量会比实际少1。

解决方法 #

针对这种需要在state更新后立刻获取最新值的场景，有两种常用方案：

1. 使用setState的回调函数
   setState接受第二个参数，是一个回调函数，会在state更新完成、组件重新渲染后执行：

   componentWillMount() { 
     console.log(this.state); // 0
     this.setState(
       { ...this.state, counter: this.state.counter + 1 },
       () => console.log(this.state) // 这里会输出更新后的1
     ); 
   }
   

   你的答题应用里，可以把需要用到最新正确数的逻辑放在这个回调里。

2. 使用函数式更新（更推荐依赖前一次state的场景）
   如果你的更新逻辑依赖于前一次的state值（比如累加计数），最好用函数式的setState，避免异步更新导致的状态覆盖：

   this.setState(prevState => ({
     counter: prevState.counter + 1
   }));
   

   这种方式会确保你拿到的是最新的前一次state，不会因为异步队列的问题导致计算错误。

额外提醒 #

另外，componentWillMount已经是React的废弃生命周期了，新项目里建议用componentDidMount或者useEffect（函数组件）来代替哦～

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