React页面刷新时useEffect仅根路由触发及组件多渲染问题咨询

一、修复页面崩溃问题 #

你的Dashboard组件直接访问userData.user_info.first_name，但页面刷新后userData初始值为null，且useEffect是异步执行的，这会触发Cannot read properties of null错误。必须添加空值保护：

修改Dashboard组件：

const Dashboard = () => {
    const { userData } = useContext(AppContext);

    // 空值检查，未加载完成时显示加载状态
    if (!userData) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <Nav />
            <div id='dashboard'>
                <div id='title' className='mt-[38px] ml-[11%]'>
                    <div className='h2'>Good morning, { userData.user_info.first_name }!</div>
                </div>
            </div>
        </div>
    )
}

二、关于useEffect仅在根路由刷新时触发的疑惑 #

实际上，不管刷新哪个路由，App组件的useEffect（空依赖数组）都会在页面刷新时触发——因为刷新页面会导致整个React应用重新挂载。你觉得没触发，大概率是以下原因：

• 刷新/dashboard时，sessionStorage.getItem("user")返回null（比如登录后未正确将数据存入sessionStorage）
• 日志被其他输出覆盖，建议在useEffect里打印user的值确认：

  useEffect(() => {
    console.log("Use effect ran");
    const user = sessionStorage.getItem("user");
    console.log("SessionStorage user:", user); // 新增该行日志
    if (user) {
      setUserData(JSON.parse(user));
      console.log("Retreived session storage");
    }
  },[]);
  

同时检查登录逻辑，确保调用setUserData的同时将数据存入sessionStorage：

// 登录成功后示例代码
const loginSuccess = (userData) => {
  setUserData(userData);
  sessionStorage.setItem("user", JSON.stringify(userData)); // 必须添加此行
}

三、App组件“App Load”日志触发4次的原因 #

这是React开发环境下StrictMode的特性：

• StrictMode会故意重复调用组件函数和副作用（挂载→卸载→重新挂载），以此检测潜在bug，正常会输出2次“App Load”
• 如果开启了热模块替换（HMR，React脚手架默认开启），代码变动后会触发额外的组件渲染，最终导致日志出现4次
• 生产环境下StrictMode会自动禁用，不会出现该问题

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