React页面刷新后暗黑模式状态异常：localStorage值与图标显示不符

问题核心：页面刷新后，localStorage中chattiny_darkmode的值为true，但图标仍显示太阳（暗模式未激活）。

问题根源 #

localStorage只能存储字符串类型数据，你的代码存在两个关键问题：

• 存入时直接写localStorage.setItem("chattiny_darkmode", true)，浏览器会自动把布尔值true转为字符串"true"存储
• 读取时直接把字符串赋值给darkMode状态，此时darkMode的值是字符串"true"，而非布尔值true。后续判断darkMode === true时，字符串和布尔值严格不相等，导致图标显示逻辑错误

修复方案 #

1. 读取localStorage时转换为布尔值：判断读取到的字符串是否为"true"，再设置状态
2. 存入localStorage时统一存字符串格式：明确将布尔值转为字符串存储

修正后的完整代码 #

const LightDarkMode = () => {
    const [darkMode, setDarkMode] = useState(false);

    useEffect(() => {
        const data = localStorage.getItem("chattiny_darkmode");
        // 转换为布尔值：只有字符串"true"才会转为true，其余为false
        if (data !== null) {
            setDarkMode(data === "true");
        }
    }, []);

    const toggleLightDark = () => {
        const newMode = !darkMode;
        setDarkMode(newMode);
        // 存入时转为字符串
        localStorage.setItem("chattiny_darkmode", newMode.toString());
    };

    return (
        <div className="light-dark-mode">
            <button onClick={toggleLightDark}>
                <FaSun className={darkMode ? "hidden" : ""} />
                <FaMoon className={darkMode ? "" : "hidden"} />
            </button>
        </div>
    );
};

额外优化说明 #

• 简化了切换逻辑：用!darkMode直接取反，避免冗余的if-else判断
• 简化了className的三元表达式：darkMode本身是布尔值，无需再写darkMode === true

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