React+Tailwind天气应用：主题偏好localStorage刷新不持久问题

核心问题 #

你的代码中，darkMode初始值固定为false，组件第一次渲染时会基于这个默认值生成浅色主题的DOM结构；之后useEffect才会从localStorage读取保存的主题偏好并更新状态。这就导致初始渲染的主题和用户实际保存的偏好不一致，即使状态更新后会重新渲染，也会出现主题闪烁或加载错误的情况。同时，页面初始化时body上的dark类也没有同步设置，进一步加剧了主题不匹配的问题。

修复步骤 #

1. 直接从localStorage初始化状态 #

把useState的初始值改为从localStorage读取的结果，避免初始渲染的主题偏差：

const [darkMode, setDarkMode] = useState(() => {
  const storedPreference = localStorage.getItem('prefersDarkMode');
  return storedPreference ? JSON.parse(storedPreference) : false;
});

2. 同步初始化body的dark类 #

在组件挂载时，立即根据初始状态给body添加或移除dark类，消除页面加载时的主题闪烁：

useEffect(() => {
  darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark');
}, []);

3. 简化localStorage写入逻辑 #

不用分别写入字符串'true'/'false'，直接存储JSON格式的状态值，逻辑更简洁：

useEffect(() => {
  localStorage.setItem('prefersDarkMode', JSON.stringify(darkMode));
  darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark');
}, [darkMode]);

完整修复代码 #

function App() {
  // 从localStorage初始化主题状态
  const [darkMode, setDarkMode] = useState(() => {
    const storedPreference = localStorage.getItem('prefersDarkMode');
    return storedPreference ? JSON.parse(storedPreference) : false;
  });

  // 组件挂载时同步body的dark类
  useEffect(() => {
    darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark');
  }, []);

  // 状态变化时同步localStorage和body类
  useEffect(() => {
    localStorage.setItem('prefersDarkMode', JSON.stringify(darkMode));
    darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark');
  }, [darkMode]);

  return (
    <div className={darkMode ? 'flex flex-col min-h-screen bg-gray-800' : 'bg-neutral-50 flex flex-col min-h-screen'}>
      <Header>
        <button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? <BsFillSunFill className="fill-neutral-100 text-2xl" /> : <BsFillMoonFill className="fill-gray-700 text-2xl" />}
        </button>
      </Header>
      <ToastContainer theme={darkMode ? 'dark' : 'light'} />
      <Footer />
    </div>
  );
}

export default App;

额外注意 #

确保你的Tailwind配置中启用了class模式的dark主题（默认是media模式），否则body上的dark类不会生效：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // 其他配置项...
}

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