fix: 修复 React Compiler 严格模式下的 lint 错误
- Memorize: 将 loadCards 内联到 useEffect 中避免变量提升问题 - DecksClient: 修复 effect 中异步加载,创建 deck 后使用 actionGetDeckById - LanguageSettings: 使用 effect 设置 cookie 避免 render 期间修改 - theme-provider: 修复 hydration 逻辑避免 render 期间访问 ref
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useEffect, useState } from "react";
|
||||
import { createContext, useContext, useEffect, useState, useMemo } from "react";
|
||||
import {
|
||||
THEME_PRESETS,
|
||||
DEFAULT_THEME,
|
||||
@@ -20,26 +20,33 @@ const ThemeContext = createContext<ThemeContextType | null>(null);
|
||||
|
||||
const STORAGE_KEY = "theme-preset";
|
||||
|
||||
function getInitialTheme(): string {
|
||||
if (typeof window === "undefined") return DEFAULT_THEME;
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
return saved && getThemePreset(saved) ? saved : DEFAULT_THEME;
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [currentTheme, setCurrentTheme] = useState<string>(DEFAULT_THEME);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [hydrated, setHydrated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const savedTheme = localStorage.getItem(STORAGE_KEY);
|
||||
if (savedTheme && getThemePreset(savedTheme)) {
|
||||
const savedTheme = getInitialTheme();
|
||||
if (savedTheme !== currentTheme) {
|
||||
setCurrentTheme(savedTheme);
|
||||
}
|
||||
setHydrated(true);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
if (!hydrated) return;
|
||||
const preset = getThemePreset(currentTheme);
|
||||
if (preset) {
|
||||
applyThemeColors(preset);
|
||||
localStorage.setItem(STORAGE_KEY, currentTheme);
|
||||
}
|
||||
}, [currentTheme, mounted]);
|
||||
}, [currentTheme, hydrated]);
|
||||
|
||||
const setTheme = (themeId: string) => {
|
||||
if (getThemePreset(themeId)) {
|
||||
@@ -47,11 +54,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
};
|
||||
|
||||
const themePreset = getThemePreset(currentTheme) || THEME_PRESETS[0];
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
const themePreset = useMemo(() => getThemePreset(currentTheme) || THEME_PRESETS[0], [currentTheme]);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider
|
||||
|
||||
Reference in New Issue
Block a user