React中useEffect内setAuthUser不生效问题排查与修复请求

核心问题 #

你的代码存在两个关键问题：

• AuthContextProvider未正确通过Context Provider暴露状态，导致子组件无法获取更新后的authUser
• 缺少异步请求的加载状态处理，初始渲染时直接因authUser为null触发跳转

修复代码 #

完整的AuthContextProvider代码 #

// 先确保你已创建AuthContext
const AuthContext = createContext();

const AuthContextProvider = ({ children }) => {
  const [authUser, setAuthUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true); // 新增加载状态

  useEffect(() => {
    const token = accessToken.getAccessToken();
    if (token) {
      CustomAxios.get("http://127.0.0.1:8000/api/user")
        .then((res) => {
          setAuthUser(res.data.user);
        })
        .catch((error) => {
          console.error("API error:", error);
          setAuthUser(null);
        })
        .finally(() => {
          setIsLoading(false); // 请求完成后结束加载
        });
    } else {
      setIsLoading(false); // 无token时直接结束加载
    }
  }, []);

  // 必须返回Context Provider并传入状态
  return (
    <AuthContext.Provider value={{ authUser, isLoading }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

修复后的Authenticated组件 #

const Authenticated = ({ children }) => {
  const { authUser, isLoading } = useAuthContext();

  // 加载中时显示占位内容，避免误跳转
  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (!authUser) {
    console.log(authUser);
    return <Navigate to="/" />;
  }

  return children;
};
export default Authenticated;

原因解释 #

1. Context Provider缺失：你之前的AuthContextProvider代码没有返回<AuthContext.Provider>组件，导致子组件通过useAuthContext只能拿到Context的初始默认值（null），即使setAuthUser更新了状态，也无法传递给子组件。补全Provider后，状态变化会被所有订阅Context的组件感知并重新渲染。
2. 异步请求的时序问题：API请求是异步操作，组件初始渲染时authUser为null，此时直接判断并跳转，会导致请求完成后更新的状态无法生效。添加isLoading状态后，在请求完成前不会执行跳转逻辑，确保authUser有机会被正确赋值。

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