React State完全不保存求助：登录/认证后状态丢失

你遇到的不是数据没保存到State，而是React的useState更新是异步批量处理的，在同一个函数执行周期里，调用setUser后不能立刻拿到更新后的user值，你打印的null是当前函数闭包捕获的旧值。

原因详解 #

React为了优化性能，会把多个State更新合并成一次渲染，所以setState调用不会同步修改State变量。在auth函数里，setUser(res.data)只是告诉React要更新State，但此时函数里的user还是初始的null，直到组件重新渲染，新的user值才会生效。

验证数据是否真的保存 #

你可以在使用useAuth的组件里，通过渲染user或者用useEffect监听user变化来验证：

import { useEffect } from 'react';
import { useAuth } from './你的文件路径';

function App() {
  const { user, auth } = useAuth();

  // 监听user变化，打印最新值
  useEffect(() => {
    console.log('当前用户数据:', user);
  }, [user]);

  return (
    <div>
      {/* 直接渲染user，看是否更新 */}
      {user ? <div>欢迎{user.name}</div> : <div>未登录</div>}
      <button onClick={auth}>自动登录</button>
    </div>
  );
}

代码优化建议 #

如果需要在auth或login函数里使用新的用户数据，直接用接口返回的res.data即可，不用依赖user变量：

async auth() {
  try {
    const res = await autoLogin();
    console.log(res.data); // 正确数据
    setUser(res.data);
    // 直接用res.data代替user，获取最新值
    console.log('新用户数据:', res.data);
    return res;
  } catch (e) {
    console.log(e);
  }
}

结论 #

你的代码里setUser已经正确把数据保存到State了，只是不能在调用setUser后立刻同步获取更新后的值。组件重新渲染后，user会更新为接口返回的数据，通过Context传递给其他组件也能拿到正确的值。

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