Next.js中useState结合useEffect无法更新主题状态求助

核心问题分析 #

你遇到的问题本质是SSR环境无法访问浏览器localStorage，同时客户端hydration时状态不匹配，以及useEffect初始化时的状态更新逻辑不当导致重置localStorage值。

分步解决方案 #

1. 安全初始化状态

服务端渲染时不能访问window或localStorage，所以状态初始值必须是服务端安全的默认值（比如0对应auto模式）：

import { useState, useEffect, useLayoutEffect } from 'react';

const [themeIndex, setThemeIndex] = useState<number>(0);

2. 客户端挂载后读取localStorage

使用同构版useLayoutEffect（减少页面闪烁，同时避免SSR警告）在客户端完全挂载后读取本地存储，仅当存储值与当前状态不同时才更新，避免不必要的状态重置：

// 定义同构版useLayoutEffect，兼容SSR和客户端
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

useIsomorphicLayoutEffect(() => {
  const savedThemeIndex = localStorage.getItem('themeIndex');
  if (savedThemeIndex) {
    const parsedIndex = parseInt(savedThemeIndex, 10) % 3;
    // 只有存储值和当前状态不一致时才更新，防止覆盖已有值
    if (parsedIndex !== themeIndex) {
      setThemeIndex(parsedIndex);
    }
  }
}, []);

3. 切换主题时同步更新localStorage

确保切换主题的逻辑同时更新状态和本地存储，避免状态与存储值不一致：

const toggleTheme = () => {
  const newIndex = (themeIndex + 1) % 3;
  setThemeIndex(newIndex);
  // 同步写入localStorage
  localStorage.setItem('themeIndex', newIndex.toString());
  // 同步应用主题样式到DOM
  applyTheme(newIndex);
};

// 单独提取主题应用逻辑，提升复用性
const applyTheme = (index: number) => {
  const root = document.documentElement;
  switch(index) {
    case 1: // light模式
      root.setAttribute('data-theme', 'light');
      root.classList.remove('dark');
      break;
    case 2: // dark模式
      root.setAttribute('data-theme', 'dark');
      root.classList.add('dark');
      break;
    default: // auto模式，跟随系统偏好
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      root.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
  }
};

4. 解决Hydration不匹配警告

由于服务端只能渲染默认状态，客户端挂载后会更新为用户存储的状态，可能触发hydration警告。可以通过以下方式处理：

• 在主题相关的DOM元素上添加suppressHydrationWarning属性：

  <button suppressHydrationWarning onClick={toggleTheme}>
    {/* 主题切换按钮内容 */}
  </button>
  

• 延迟主题组件渲染，直到客户端挂载完成：

  const [isClient, setIsClient] = useState(false);
  useEffect(() => setIsClient(true), []);
  
  return isClient ? <ThemeToggle /> : null;
  

为什么之前的代码会重置localStorage？ #

你之前的useEffect可能没有判断存储值与当前状态是否一致，导致初始时默认值0的更新逻辑被执行，进而触发其他逻辑覆盖了localStorage中的已有值。通过添加parsedIndex !== themeIndex的判断，就能避免这种不必要的状态更新。

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