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:
2026-03-11 09:51:25 +08:00
parent 804c28ada9
commit 4d4062985d
4 changed files with 75 additions and 45 deletions

View File

@@ -34,25 +34,33 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
const [error, setError] = useState<string | null>(null);
useEffect(() => {
loadCards();
}, [deckId]);
let ignore = false;
const loadCards = () => {
setIsLoading(true);
setError(null);
startTransition(async () => {
const result = await actionGetCardsForReview({ deckId, limit: 50 });
if (result.success && result.data) {
setCards(result.data);
setCurrentIndex(0);
setShowAnswer(false);
setLastScheduled(null);
} else {
setError(result.message);
}
setIsLoading(false);
});
};
const loadCards = async () => {
setIsLoading(true);
setError(null);
startTransition(async () => {
const result = await actionGetCardsForReview({ deckId, limit: 50 });
if (!ignore) {
if (result.success && result.data) {
setCards(result.data);
setCurrentIndex(0);
setShowAnswer(false);
setLastScheduled(null);
} else {
setError(result.message);
}
setIsLoading(false);
}
});
};
loadCards();
return () => {
ignore = true;
};
}, [deckId]);
const getCurrentCard = (): ActionOutputCardWithNote | null => {
return cards[currentIndex] ?? null;

View File

@@ -22,6 +22,7 @@ import {
actionDeleteDeck,
actionGetDecksByUserId,
actionUpdateDeck,
actionGetDeckById,
} from "@/modules/deck/deck-action";
import type { ActionOutputDeck } from "@/modules/deck/deck-action-dto";
@@ -148,17 +149,25 @@ export function DecksClient({ userId }: DecksClientProps) {
const [decks, setDecks] = useState<ActionOutputDeck[]>([]);
const [loading, setLoading] = useState(true);
const loadDecks = async () => {
setLoading(true);
const result = await actionGetDecksByUserId(userId);
if (result.success && result.data) {
setDecks(result.data);
}
setLoading(false);
};
useEffect(() => {
let ignore = false;
const loadDecks = async () => {
setLoading(true);
const result = await actionGetDecksByUserId(userId);
if (!ignore) {
if (result.success && result.data) {
setDecks(result.data);
}
setLoading(false);
}
};
loadDecks();
return () => {
ignore = true;
};
}, [userId]);
const handleUpdateDeck = (deckId: number, updates: Partial<ActionOutputDeck>) => {
@@ -176,8 +185,11 @@ export function DecksClient({ userId }: DecksClientProps) {
if (!deckName?.trim()) return;
const result = await actionCreateDeck({ name: deckName.trim() });
if (result.success) {
loadDecks();
if (result.success && result.deckId) {
const deckResult = await actionGetDeckById({ deckId: result.deckId });
if (deckResult.success && deckResult.data) {
setDecks((prev) => [...prev, deckResult.data!]);
}
} else {
toast.error(result.message);
}

View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import { Languages } from "lucide-react";
import { cn } from "@/utils/cn";
@@ -17,6 +17,7 @@ const languages = [
export function LanguageSettings() {
const [isOpen, setIsOpen] = useState(false);
const [pendingLocale, setPendingLocale] = useState<string | null>(null);
const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@@ -46,10 +47,16 @@ export function LanguageSettings() {
}
}, [isOpen]);
const setLocale = async (locale: string) => {
document.cookie = `locale=${locale}`;
window.location.reload();
};
useEffect(() => {
if (pendingLocale) {
document.cookie = `locale=${pendingLocale}; path=/`;
window.location.reload();
}
}, [pendingLocale]);
const setLocale = useCallback((locale: string) => {
setPendingLocale(locale);
}, []);
return (
<div className="relative" ref={menuRef}>

View File

@@ -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