React上下文主题模式页面切换重置问题解决方案咨询

问题出在useState的状态仅存在于内存中，当页面刷新（或组件重新初始化）时，状态会回到初始的"dark"值。要让主题模式持久化，需要将状态存储到本地存储（localStorage）中，步骤如下：

修改SessionContextProvider代码 #

更新上下文提供者，从localStorage读取初始状态，并在切换模式时同步保存到本地：

import {createContext, useState} from "react";

const SessionContext = createContext({
    mode: [],
    changeMode: () => {
    },
});

export function SessionContextProvider(props) {
    // 从localStorage读取初始主题，不存在则用"dark"
    const [sessionMode, setSessionMode] = useState(() => {
        return localStorage.getItem('themeMode') || 'dark';
    });

    function ChangeModeHandler() {
        const newMode = sessionMode === "light" ? "dark" : "light";
        setSessionMode(newMode);
        // 将新主题保存到localStorage
        localStorage.setItem('themeMode', newMode);
    }

    const context = {
        mode: sessionMode,
        changeMode: ChangeModeHandler,
    };

    return (
        <SessionContext.Provider value={context}>
            {props.children}
        </SessionContext.Provider>
    );
}

export default SessionContext;

原理说明 #

• 初始化时，useState的回调函数会优先从localStorage读取之前保存的主题模式，没有则使用默认的"dark"。
• 切换主题时，先计算新的模式，更新状态的同时将其存入localStorage，这样即使页面刷新或重新加载，也能从本地存储恢复之前的主题设置。

这样修改后，无论切换页面（包括浏览器刷新），主题模式都会保持之前选择的状态，不会重置为默认值。

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