React页面刷新/跳转时User先为null后恢复的问题及解决

云上老周

2026-7-22

问题原因

你遇到的情况是由React组件渲染流程和useEffect的执行时机导致的：

AuthContextProvider初始化时，state里的user默认设为null，所以组件首次渲染时，所有消费这个上下文的子组件拿到的user都是null。
useEffect是在组件首次渲染完成后才执行的钩子，这时候才会读取localStorage并通过dispatch更新state，触发二次渲染，子组件这时候才能拿到正确的user值。

解决方案

直接在初始化reducer的state时同步读取localStorage的用户数据，跳过useEffect的异步执行环节，让组件一开始就拥有正确的用户状态：

修改AuthContext.js代码如下：

import { createContext, useReducer } from "react";

export const AuthContext = createContext();

export const authReducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      return { user: action.payload };
    case "LOGOUT":
      return { user: null };
    default:
      return state;
  }
};

// 同步读取localStorage用户数据，添加异常处理避免JSON解析报错
const getInitialUser = () => {
  try {
    const storedUser = localStorage.getItem("user");
    return storedUser ? JSON.parse(storedUser) : null;
  } catch (error) {
    console.error("解析localStorage用户数据失败:", error);
    return null;
  }
};

export const AuthContextProvider = ({ children }) => {
  // 初始化时直接使用从localStorage读取到的用户数据
  const [state, dispatch] = useReducer(authReducer, {
    user: getInitialUser(),
  });

  console.log("AuthContext state:", state);

  return (
    <AuthContext.Provider value={{ ...state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
};

补充说明