读取Chrome扩展本地存储值作为useState初始值时取值为undefined怎么解决

• React 组件的执行时序为：先执行所有同步代码完成首次渲染，渲染结束后才会触发 useEffect/useLayoutEffect 类副作用 Hook
• Chrome 扩展的本地存储读取（不管是直接调用 chrome.storage API，还是通过 chrome.runtime.sendMessage 通信读取后台存储数据）全链路为异步逻辑，首次渲染阶段不可能拿到返回值
• 原实现中存在两个逻辑漏洞：
  • 普通变量 overviewIsOpenLS 会在每次组件重渲染时被重新声明为 undefined，就算在副作用里完成赋值，也无法被后续的 useState 逻辑读到
  • 给普通变量赋值的操作不会触发 React 重渲染，就算数据成功获取，组件也不会更新界面

方案1：分阶段加载渲染（推荐） #

通过独立的加载状态标记阻断首次业务渲染，等异步存储数据返回后再更新状态、渲染业务内容，完全避开时序问题，不会出现初始值闪烁。

const Popup = (): ReactElement => {
    // 初始化加载标记、带临时默认值的状态
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const [overviewIsOpen, setOverviewIsOpen] = useState<boolean>(false);

    // 副作用 Hook 中发起存储读取
    useLayoutEffect(() => {
        const handleStorageResponse = (storedValue: boolean) => {
            // 拿到真实存储值后更新状态
            setOverviewIsOpen(storedValue);
            // 标记加载完成，触发重渲染
            setIsLoading(false);
        };

        chrome.runtime.sendMessage(
            { getFromLocalStorage: 'overviewIsOpen' },
            handleStorageResponse
        );

        // 组件卸载时的清理逻辑
        return () => {};
    }, []);

    // 加载阶段不渲染业务内容
    if (isLoading) {
        return <div>加载中...</div>;
    }

    return <>
        {/* 实际业务代码，此时状态值已和本地存储同步 */}
        <button onClick={() => setOverviewIsOpen(prev => !prev)}>
            {overviewIsOpen ? '收起概览面板' : '展开概览面板'}
        </button>
    </>;
}

适用场景：对界面一致性要求高，无法接受初始默认值和真实存储值偏差的场景。

方案2：默认值过渡渲染（轻量场景适用） #

如果 Chrome Popup 的存储读取耗时极短（通常为几毫秒到几十毫秒），可直接给 useState 设置一个和业务默认逻辑一致的初始值，等异步数据返回后自动更新为真实存储值，用户基本无法感知闪烁。

const Popup = (): ReactElement => {
    // 设置和业务默认逻辑一致的初始值
    const [overviewIsOpen, setOverviewIsOpen] = useState<boolean>(false);

    useLayoutEffect(() => {
        chrome.runtime.sendMessage(
            { getFromLocalStorage: 'overviewIsOpen' },
            storedValue => setOverviewIsOpen(storedValue)
        );
    }, []);

    // 直接渲染业务内容
    return <>
        <button onClick={() => setOverviewIsOpen(prev => !prev)}>
            {overviewIsOpen ? '收起概览面板' : '展开概览面板'}
        </button>
    </>;
}

注意：仅当存储读取速度足够快、默认值和真实值的视觉偏差完全可接受时使用，否则仍推荐方案1。

实现提醒：读取异步数据时可对返回值做合法性校验，比如判断返回值类型是否为布尔值，避免因消息响应异常、通道断开等问题导致状态值异常。

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