在 React 中，useState 的 set 方法是异步的，并且状态在当前函数执行上下文中不会立即更新，这常常导致开发者误以为“set 不生效”。

import React, { useState, useEffect } from 'react';
export default function App() {
 const [count, setCount] = useState(1);
 useEffect(() => {
   window.addEventListener('keydown', onKeyDown);
   return () => window.removeEventListener('keydown', onKeyDown);
 }, []);
 const onKeyDown = () => {
   console.log('当前 count:', count);
   setCount(count + 1);
 };
 return <p>{count}</p>;
}

在上述代码中，无论按多少次键盘，count 都会停留在 2，因为事件回调闭包捕获了初始值。

原因分析 React 函数组件每次渲染都会生成新的状态快照，事件回调如果依赖空数组 [] 注册，只会捕获初始状态。调用 setCount(count + 1) 时使用的仍是旧值。此外，useState 更新是异步批处理的，当前执行上下文中读取到的仍是旧状态。

解决方法 使用函数式更新确保基于最新状态计算：

const onKeyDown = () => {
 setCount(prev => prev + 1);
};

这种写法中，React 会将更新函数放入队列，并在下一次渲染时依次执行，保证拿到的是最新的 prev 值。

其他注意事项 如果更新对象或数组时直接修改原引用（如 obj.x = 10; setObj(obj)），React 会认为状态未变化而跳过渲染，应返回新对象或数组。 不要期望在调用 set 后立即通过变量获取最新值，如需监听变化，请使用 useEffect。

通过理解闭包捕获、异步批处理和不可变数据原则，可以有效避免 useState 更新不生效的问题。