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:
@@ -34,14 +34,14 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadCards();
|
||||
}, [deckId]);
|
||||
let ignore = false;
|
||||
|
||||
const loadCards = () => {
|
||||
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);
|
||||
@@ -51,9 +51,17 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
|
||||
setError(result.message);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
loadCards();
|
||||
|
||||
return () => {
|
||||
ignore = true;
|
||||
};
|
||||
}, [deckId]);
|
||||
|
||||
const getCurrentCard = (): ActionOutputCardWithNote | null => {
|
||||
return cards[currentIndex] ?? null;
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -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}`;
|
||||
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}>
|
||||
|
||||
@@ -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