React中根据暗黑模式状态设置Checkbox选中状态问题求助

原代码的核心问题 #

• 初始状态同步错误：useEffect里用setDarkMode(!darkMode)取反初始值，而非根据实际主题状态设置，导致状态与真实主题可能不符。
• 切换时未更新React状态：changeTheme仅修改DOM类名和localStorage，但未更新darkMode状态，Checkbox的checked属性无法响应变化，出现点击后选中状态不更新的情况。
• 冗余的localStorage操作：初始渲染时强制覆盖localStorage值，可能忽略用户之前的主题偏好设置。

修复后的代码 #

import React, { useEffect, useState } from "react";

function Header() {
  // 函数式初始化，直接计算初始暗黑模式状态
  const [darkMode, setDarkMode] = useState(() => {
    return localStorage.theme === 'dark' || 
           (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
  });

  // 依赖darkMode状态，自动同步DOM和localStorage
  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    }
  }, [darkMode]);

  // 切换主题只需翻转状态，同步逻辑交给useEffect
  const changeTheme = () => {
    setDarkMode(prev => !prev);
  };

  return (
    <header>
      <nav>
        <input checked={darkMode} type="checkbox" onChange={changeTheme} />
      </nav>
    </header>
  );
}

export default Header;

关键优化点 #

1. 初始状态精准计算：用useState的函数式初始化，直接根据localStorage和系统主题偏好计算初始状态，避免useEffect延迟更新导致的页面初始状态不一致。
2. 单一数据源管理：把DOM和localStorage的同步逻辑放到依赖darkMode的useEffect中，确保状态、DOM、本地存储三者始终保持一致，避免重复代码。
3. 简化切换逻辑：changeTheme只负责翻转darkMode状态，无需重复判断主题，所有同步操作由useEffect自动处理，减少出错概率。

可选优化：监听系统主题变化 #

如果需要跟随系统主题设置自动切换（当用户未手动设置过主题时），可以添加以下监听：

useEffect(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  const handleSystemThemeChange = (e) => {
    // 仅当localStorage未存储主题偏好时，跟随系统变化
    if (!('theme' in localStorage)) {
      setDarkMode(e.matches);
    }
  };

  mediaQuery.addEventListener('change', handleSystemThemeChange);
  // 组件卸载时移除监听，避免内存泄漏
  return () => mediaQuery.removeEventListener('change', handleSystemThemeChange);
}, []);

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