React Hooks中如何获取State的最新变更值

核心差异先理清 #

类组件中this.setState的第二个回调参数，设计目的就是等React把状态更新到组件、完成DOM重渲染之后，在回调里读取最新的this.state执行副作用。而useState返回的更新函数本身不提供第二个回调参数，这是Hooks的设计选择，不是功能缺失，对应场景有成熟的实现方案可以完全覆盖。

你写的这段代码里，问题本质来自两个常见认知偏差：

• 你现在打印的newSocialData是自己手动构造的、准备传入更新函数的目标值，本来就不是从state里读出来的；如果控制台输出的是旧值，大概率是闭包捕获了旧的socialData引用，没有基于最新的state计算新值。
• 你混淆了“构造新状态值”和“拿到更新后组件内的最新state”两个需求场景，两种场景的实现逻辑完全不同。

分场景的正确实现 #

场景1：需要在state更新完成、组件重渲染后执行逻辑（完全等价于类组件setState的回调） #

这是最贴合类组件用法的标准实现，通过useEffect监听目标state的变化，在组件渲染完成后触发回调，此时拿到的就是和渲染一致的最新state值。
示例代码：

const [socialData, setSocialData] = useState([
  { id: new Date().getTime().toString(), ...newItem }
]);

// 监听socialData变化，状态更新重渲染完成后自动触发
useEffect(() => {
  // 这里拿到的socialData就是更新完成后的最新值
  console.log('最新的socialData：', socialData);
  // 把原来放在setState之后的逻辑挪到这里，就和类组件的回调时序完全一致
  onInputChange(socialData, formKey);
}, [socialData]); // 依赖项填需要监听的state变量

const onChangeCallback = (index, type, data) => {
  // 用函数式更新规避闭包陷阱，prev永远是React内部存储的最新state
  setSocialData(prev => {
    const newSocialData = [...prev];
    newSocialData[index] = { ...newSocialData[index], [type]: data };
    return newSocialData;
  });
};

注意点：这个effect会在组件首次挂载时也触发一次，如果不需要首次执行，可以加个标记位跳过首轮运行。

场景2：不需要等组件重渲染，需要立刻拿到计算后的新状态值 #

很多时候根本不需要等React触发重渲染、把state同步到组件作用域：你自己计算出来准备传入更新函数的新值，本身就是你要的“最新状态”，可以直接在构造新值的阶段使用，完全不需要额外读state。
示例代码：

const onChangeCallback = (index, type, data) => {
  setSocialData(prev => {
    // 基于React返回的最新prev构造新值，和最终存入state的值完全一致
    const newSocialData = [...prev];
    newSocialData[index] = { ...newSocialData[index], [type]: data };
    // 这里直接用构造好的newSocialData就行，不需要等任何回调
    onInputChange(newSocialData, formKey);
    console.log('计算得到的新状态：', newSocialData);
    // 返回的新值会被React存为最新的state
    return newSocialData;
  });
};

这种方式拿到的值不存在新旧问题，因为函数式更新的入参prev是React内部维护的最新状态，不是外层闭包捕获的旧值，在高频触发、异步回调场景下也不会出错。

场景3：需要在任意异步/跨调用时机拿到最新state #

如果要在定时器、全局事件回调、异步请求完成这类脱离组件渲染周期的场景下拿最新state，可以搭配useRef做state值的同步：

// 初始化ref值和state保持一致
const socialDataRef = useRef(socialData);
// 每次组件渲染时，把最新的state同步到ref中
useEffect(() => {
  socialDataRef.current = socialData;
}, [socialData]);

// 之后不管在哪个异步场景下，读取socialDataRef.current就能拿到当前最新的state值
// 比如异步请求完成后的回调、setTimeout的延时逻辑里都可以直接用

常见踩坑提醒 #

• 不要在调用setState之后立刻从外层作用域的state变量读值：React的状态更新是异步批量处理的，调用setState之后，外层作用域的state变量要等组件重新渲染之后才会更新，立刻读的肯定是上一次渲染的旧值——这和类组件里调用setState后不等回调直接读this.state拿到旧值的逻辑完全一致，不是Hooks独有的问题。
• 你现在写的let newSocialData = [...socialData]，这里的socialData是组件渲染时闭包捕获的固定值，在连续触发回调、组件还没来得及重渲染的场景下，多次调用拿到的都是同一个初始的旧数组引用，基于它修改的结果自然也是旧状态，换成函数式更新拿到的prev计算新值，就不会有这个问题。
• 尽量避免直接用外层捕获的state变量计算新值，高频回调、闭包场景下很容易拿到旧值，优先用setXxx(prev => 新值)的函数式更新写法，从根源上规避闭包陷阱。

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