相关疑难解决方法(0)

Nextjs 13 Hydration 失败,因为初始 UI 与服务器上呈现的内容不匹配

我正在使用下一个13.1.0。我有一个 ContextProvider 设置浅色和深色主题

'use client';
import { Theme, ThemeContext } from '@store/theme';
import { ReactNode, useState, useEffect } from 'react';

interface ContextProviderProps {
  children: ReactNode
}

const ContextProvider = ({ children }: ContextProviderProps) => {
  const [theme, setTheme] = useState<Theme>('dark');

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'light' || storedTheme === 'dark') {
      setTheme(storedTheme);
    } else {
      localStorage.setItem('theme', theme);
    }
    // added to body because of overscroll-behavior
    document.body.classList.add(theme);
    return () => {
      document.body.classList.remove(theme);
    };
  }, [theme]);

  const …
Run Code Online (Sandbox Code Playgroud)

javascript local-storage reactjs next.js

15
推荐指数
3
解决办法
3万
查看次数

标签 统计

javascript ×1

local-storage ×1

next.js ×1

reactjs ×1