React如何在useContext返回有效值后再加载Dashboard组件

你遇到的问题根源是React的useEffect执行时机晚于组件首次渲染：

• 你给currentUser设置的初始值是null
• 读取本地存储设置currentUser的逻辑写在useEffect中，而useEffect会在组件首次挂载渲染完成后才执行
• 因此包括Dashboard在内的所有子组件第一次渲染时，拿到的currentUser一定是初始值null，和isLoggedIn的执行速度无关

第一步：修改全局状态逻辑，增加加载标识 #

你可以选择以下两种方案二选一：

方案A：新增独立的加载状态（更清晰） #

修改App.js代码：

export const CurrentUserContext = React.createContext(null); // Global Context
const [currentUser, setCurrentUser] = useState(null); // Global State
// 新增加载状态，标记是否完成用户身份初始化
const [authLoading, setAuthLoading] = useState(true);

// 修正useEffect逻辑，原代码中给同步返回值加catch是错误写法，会触发报错
useEffect(() => {
    setCurrentUser(isLoggedIn());
    setAuthLoading(false); // 身份读取完成，更新加载状态
}, []);

// 优化isLoggedIn方法，增加JSON解析异常捕获，避免非法存储内容导致页面崩溃
export function isLoggedIn() {
    try {
        const userStr = localStorage.getItem('user');
        return userStr ? JSON.parse(userStr) : null;
    } catch(err) {
        console.error('用户信息解析失败', err);
        localStorage.removeItem('user');
        return null;
    }
}

// Context Provider中传入加载状态
<CurrentUserContext.Provider value={{ currentUser, setCurrentUser, authLoading }}>

方案B：用undefined区分未初始化状态（改动更小） #

如果不想新增状态，可以用undefined作为currentUser的初始值，和代表未登录的null做区分：

// 初始值设为undefined，代表还未读取本地存储
const [currentUser, setCurrentUser] = useState(undefined);

// 其余逻辑和方案A一致，不需要新增authLoading状态

第二步：修改Dashboard组件逻辑，等待初始化完成后再执行业务判断 #

如果用方案A（带authLoading）： #

在Dashboard组件最开头先判断加载状态：

import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { CurrentUserContext } from './App';

function Dashboard() {
  const { currentUser, authLoading } = useContext(CurrentUserContext);

  // 初始化未完成时渲染加载占位，不执行后续逻辑
  if (authLoading) {
    return <div>身份校验中...</div>;
  }

  // 初始化完成后再判断是否需要重定向
  if (!currentUser) {
    return <Navigate to="/login" />;
  }

  // 后续正常写Dashboard业务逻辑，此时currentUser一定有值，不会抛出null错误
  return (
    <div>
      {/* 你的Dashboard内容 */}
    </div>
  )
}

如果用方案B（用undefined做区分）： #

只需要把加载判断的条件改一下即可：

// currentUser为undefined代表还未完成初始化
if (currentUser === undefined) {
  return <div>身份校验中...</div>;
}

你提供的Dashboard组件截图：

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