ReactJS无第三方库实现全局状态持久化刷新后访问属性报错问题

• 全局状态初始化时机晚于子组件首次渲染：useEffect 是组件挂载完成后才执行的回调，此时路由内的子组件已经完成首次渲染，而你的全局状态初始值是空对象，直接访问 trial、payment_failed 这类深层属性自然会抛出 undefined 错误。
• 渲染中断导致 useEffect 未执行：子组件首次渲染时访问不存在的属性抛出异常，打断了整个渲染流程，BaseComponent 的 useEffect 根本没机会执行，所以你看不到控制台打印。
• 状态更新不符合不可变原则：你直接修改原全局状态的引用，容易引发不可预期的状态更新问题。

方案1：将本地存储初始化逻辑移入全局状态初始值（推荐） #

直接在 GlobalStateProvider 的 useState 初始化阶段读取 localStorage，不需要等 useEffect 执行，子组件首次渲染就能拿到完整状态。修改 GlobalStateProvider 代码如下：

const GlobalStateProvider = ({
                                 children,
                                 value = {} as GlobalStateInterface,
                             }: {
    children: React.ReactNode;
    value?: Partial<GlobalStateInterface>;
}) => {
    const [globalState, setGlobalState] = useState(() => {
        // 初始化时直接读本地存储
        const savedState = localStorage.getItem("global_state");
        if (!savedState) return value;
        try {
            const parsedState = JSON.parse(savedState);
            // 合并传入的默认值和本地存储值
            return { ...value, ...parsedState };
        } catch (err) {
            console.error("全局状态解析失败", err);
            return value;
        }
    });

    return (
        <GlobalStateContext.Provider value={{ globalState, setGlobalState }}>
            {children}
        </GlobalStateContext.Provider>
    );
};

修改后可以直接删除 BaseComponent 的初始化逻辑，不需要额外用组件做初始化。

方案2：加加载状态阻塞子组件渲染 #

如果要保留 BaseComponent 的结构，需要加加载状态，等状态初始化完成再渲染子组件，避免首次渲染访问空状态：

import * as React from "react";
import {useEffect, useState} from "react";
import {useGlobalState} from "./GlobalStateProvider";

export default function BaseComponent(props) {
    const { setGlobalState } = useGlobalState();
    const [stateLoaded, setStateLoaded] = useState(false);
    useEffect(() => {
        let tempGlobalStorage = localStorage.getItem("global_state");
        console.log("Temp Global State: ", tempGlobalStorage);
        if (tempGlobalStorage !== null) {
            const tempGlobalStorageJson = JSON.parse(tempGlobalStorage);
            setGlobalState({...tempGlobalStorageJson});
        }
        // 初始化完成再放开渲染
        setStateLoaded(true);
    }, []);

    return stateLoaded ? (
        <>
            {props.children}
        </>
    ) : <div>加载中...</div> /* 可以替换为自定义加载动画 */
}

• 修改状态更新写法：不要直接修改原状态引用，改为先展开生成新对象再修改，符合 React 不可变数据原则：

  // 错误写法：直接修改原状态引用
  // const tempGlobalState = globalState;
  // 正确写法：展开生成新对象
  const tempGlobalState = { ...globalState };
  tempGlobalState.trial = {
      in_trial: response.data.in_trial,
      days_of_trial_remaining: response.data.in_trial ? response.data.trial_days_remaining : null
  }
  

• 访问深层属性时添加可选链：比如用 globalState.trial?.in_trial 替代 globalState.trial.in_trial，避免状态未初始化时直接抛错。

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