React点击按钮后useState未立即更新、首次打印获取旧值问题

React 中函数组件的 state 更新采用异步批处理机制，state 变量的值本质是当前组件渲染周期的快照：

• 组件每次渲染时，内部定义的所有函数、变量都会捕获当次渲染的固定 state 值，形成独立闭包
• 调用setTest(true)时，React 不会立刻修改当前闭包里的test变量，只会调度一次新的组件重渲染，等重渲染完成后，新的test值才会存在于下一次渲染的闭包中
• 你在调用setTest后立刻打印test，拿到的永远是当前点击事件触发时、所在闭包捕获的旧值。React DevTools 展示的是组件完成重渲染后的最终state值，和当前执行上下文中的闭包变量不是同一个引用，所以会出现显示不一致的现象。

你观察到的“第二次点击输出true”本质是：第一次点击触发的重渲染完成后，第二次点击触发的fun函数已经是新渲染周期生成的函数，它闭包里捕获的test已经是第一次更新后的true，并不是第一次set操作立刻修改了当前闭包的值。如果在第二次点击时把set值改成false，立刻打印依然会拿到旧值true。

根据你的业务场景选对应方案即可：

• 方案1：直接使用要更新的目标值执行后续逻辑
  如果setState之后的逻辑只依赖你这次要设置的新值，不需要从state里读取，直接使用传入setState的目标值即可，是最简单的处理方式：

  const fun=()=>{
    const nextTest = true;
    setTest(nextTest);
    console.log(nextTest); // 首次点击即可输出true
  }
  

• 方案2：用useEffect监听state变化执行更新后逻辑
  如果逻辑必须依赖最新的state值，把相关逻辑放到useEffect中，它会在组件完成重渲染、state更新为最新值后触发：

  import { useState, useEffect } from 'react';
  const App=()=>{
    const [test,setTest]=useState(false);
  
    // 监听test变化，test更新完成后自动执行
    useEffect(() => {
      console.log(test); // 永远能拿到最新的test值
    }, [test])
  
    const fun=()=>{
      setTest(true); 
    }
    return(
      <>
        <button onClick={fun}>Test</button>
      </>
    )
  }
  

• 方案3：React 18+版本可使用flushSync强制同步更新（非必要不推荐）
  如果确实需要在事件回调中立刻拿到更新后的值，可以用react-dom提供的flushSync强制React同步完成本次state更新，注意该方式会打断React默认的批处理优化，滥用会降低页面性能：

  import { useState } from 'react';
  import { flushSync } from 'react-dom';
  
  const App=()=>{
    const [test,setTest]=useState(false);
  
    const fun=()=>{
      flushSync(() => {
        setTest(true);
      });
      // flushSync执行完成后会立刻完成重渲染，此处可以拿到最新的test值
      console.log(test); 
    }
    return(
      <>
        <button onClick={fun}>Test</button>
      </>
    )
  }
  

内容的提问来源于stack exchange，提问作者Ayush Kumar Bhadani