为何React useState更新函数首次调用后控制台输出旧值

这类问题是React函数组件两个核心机制共同作用的结果：

• 状态值的快照特性：useState返回的状态变量，是当前组件渲染周期内捕获的固定快照，并非指向实时状态的动态引用。事件回调函数里引用的状态值，是组件上次完成渲染时生成的旧值，不会因为调用了状态更新函数就自动变化。
• 状态更新的异步批处理机制：调用LunchUpdate/DinnerUpdate这类状态更新函数时，React不会立刻修改状态、触发组件重渲染。它会把这次更新任务加入更新队列，等当前整个事件回调的所有逻辑执行完毕后，才会统一应用队列里的状态变更，触发一次重渲染。重渲染时才会生成新的状态快照，供下一次事件回调捕获。

对应到代码执行流：

1. 首次点击Lunch类型的提交按钮时，执行流为：捕获当前渲染周期的旧值LunchStatus = 'Lunch YES' → 调用LunchUpdate('Lunch NO')将更新任务入队 → 立刻执行console.log，打印的还是刚才捕获的旧值'Lunch YES' → 回调执行完毕，React才应用更新、重渲染组件，生成新的状态快照LunchStatus = 'Lunch NO'。
2. 后续再次点击按钮时，事件回调是绑定在最新渲染的组件上的，捕获的已经是上次更新后的新值，所以控制台才会打印出更新后的状态值。
   观察到的交替点击输出序列，完全符合这个执行逻辑：前两次点击分别打印两个状态的初始旧值，重渲染完成后，后续回调捕获到的都是已经更新后的'Lunch NO'/'Dinner NO'，所以后续输出就固定为这两个值。

根据实际业务场景选择对应实现即可：

• 如果需求是状态变更后触发副作用（如打印日志、发请求），使用useEffect监听对应状态，不要直接在状态更新后读旧值：

  // 组件内部引入useEffect后添加
  useEffect(() => {
    // 该回调仅在LunchStatus真正更新、组件重渲染后执行
    console.log(LunchStatus)
  }, [LunchStatus])
  
  useEffect(() => {
    console.log(DinnerStatus)
  }, [DinnerStatus])
  

• 如果需求是在当前提交逻辑中直接使用更新后的值，直接在局部定义新的状态值变量，不要依赖闭包捕获的旧状态变量：

  function handlingSubmit(e){
    if(props.type === 'Lunch'){
      const newLunchValue = 'Lunch NO'
      // 调用更新函数时传入函数形式，可拿到React侧存储的最新状态做计算
      LunchUpdate(() => newLunchValue)
      // 直接打印自定义的新值，和后续状态更新保持一致
      console.log(newLunchValue)
    }
    else{
      const newDinnerValue = 'Dinner NO'
      DinnerUpdate(() => newDinnerValue)
      console.log(newDinnerValue)
    }
  }
  

• 如果需要在跨渲染的任意逻辑中实时读取最新状态值，使用useRef同步缓存状态，规避闭包捕获旧值的问题：

  import { useState, useRef } from 'react'
  
  const Food = (props) =>{
    const [LunchStatus, LunchUpdate] = useState('Lunch YES');
    const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');
    // 用ref缓存最新状态，ref的current不会被闭包固定
    const lunchRef = useRef(LunchStatus)
    const dinnerRef = useRef(DinnerStatus)
  
    function handlingSubmit(e){
      if(props.type === 'Lunch'){
        const newVal = 'Lunch NO'
        lunchRef.current = newVal
        LunchUpdate(newVal)
        // 任意位置读取lunchRef.current，拿到的永远是最新值
        console.log(lunchRef.current)
      }
      else{
        const newVal = 'Dinner NO'
        dinnerRef.current = newVal
        DinnerUpdate(newVal)
        console.log(dinnerRef.current)
      }
    }
    // ...其余组件逻辑
  }
  

注意：首次打印旧值不是状态更新失效，本质是事件回调的闭包天然绑定了组件上一次渲染的上下文，同一次回调执行流程中，没有办法直接拿到刚入队、还未应用的新状态值。如果要绕过这个限制，只能通过ref这类可变引用的存储方式，自行维护最新值的映射。

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