Chakra UI明暗模式切换开关需两次点击切换的原因排查

问题根源 #

1. 开关状态与主题不同步：原代码通过条件渲染两个Switch组件，当主题状态更新后，开关的视觉状态无法实时同步，导致需要两次点击才能恢复视觉一致。
2. 存储逻辑错误：saveState函数先调用toggleTheme切换状态，再根据传入的旧主题值计算存储内容，逻辑颠倒，造成状态不同步。
3. 初始状态异常：当localStorage中无主题数据时，loadState返回undefined，会将theme设为undefined，引发初始状态混乱。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import { Switch } from '@chakra-ui/react';

const ThemeToggle = () => {
  // 初始化主题：优先读取localStorage，无值则默认light
  const [theme, setTheme] = useState(() => {
    try {
      const savedTheme = localStorage.getItem('theme');
      return savedTheme ? JSON.parse(savedTheme) : 'light';
    } catch (err) {
      return 'light';
    }
  });

  // 切换主题逻辑
  const handleThemeToggle = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  // 主题变化时自动同步到localStorage
  useEffect(() => {
    try {
      localStorage.setItem('theme', JSON.stringify(theme));
    } catch (err) {
      console.error('存储主题状态失败:', err);
    }
  }, [theme]);

  return (
    <Switch 
      onChange={handleThemeToggle} 
      isChecked={theme === 'dark'} 
      id="theme-toggle" 
    />
  );
};

export default ThemeToggle;

关键改进点 #

1. 简化开关渲染：直接通过isChecked={theme === 'dark'}绑定开关状态，视觉与主题完全同步，无需条件渲染多个组件。
2. 优化初始化逻辑：在useState初始化时直接读取localStorage，避免额外的useEffect加载，逻辑更紧凑。
3. 自动同步存储：用useEffect监听theme变化，状态更新时自动写入localStorage，彻底避免手动计算存储值的错误。
4. 错误处理更完善：初始化和存储时都增加了异常捕获，避免因存储失败导致功能异常。

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