为何调用Fetch并await后，state变量userData仍为空数组？

这是React State的两个核心特性导致的：

1. State更新是异步批量处理的 #

调用setData(data)并没有立即修改userData的值，它只是给React发送了一个「需要更新State」的请求。React会把这类更新请求暂存起来，等当前函数执行完毕、浏览器进入空闲状态时，才会统一处理更新并触发组件重新渲染。所以在setData之后立刻打印，State还没来得及完成更新。

2. State是函数闭包中的快照值 #

函数组件每次渲染时，都会生成一个新的闭包，里面的State是当前渲染时刻的「快照」。在你调用getData的那次函数执行中，userData捕获的是函数启动时的旧值（也就是空数组）——哪怕setData已经调用，这个闭包里的userData也不会同步变化，只有等到组件重新渲染，新的闭包才会拿到更新后的State值。

验证与解决方式 #

• 若只是想确认数据是否成功获取，直接打印刚拿到的data即可，它就是你要存入State的新数据。
• 若需要在userData更新后执行操作，可以用useEffect监听userData的变化：

function App() {
  const [userData, setData] = useState([]);

  const getData = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    setData(data);
    // 此处打印的是当前闭包中的旧快照，依然是空数组
    console.log("当前闭包中的userData:", userData);
    // 直接打印data确认获取结果
    console.log("获取到的新数据:", data);
  };

  // 监听userData变化，更新后触发回调
  useEffect(() => {
    if (userData.length > 0) {
      console.log("userData已更新为:", userData);
      // 这里可以编写State更新后的逻辑
    }
  }, [userData]);

  return (
    <>
      <button onClick={getData}>get data</button>
      
      <div>
        {userData?.map((user) => (
          <p key={user.id}>
            {user.name} {user.email}
          </p>
        ))}
      </div>
    </>
  );
}

export default App;

总结：不要在调用setState后立刻依赖当前的State值，要么直接使用刚获取到的原始数据，要么通过useEffect等待State更新完成后再处理后续逻辑。

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