NoelOrin
/
app-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(web): hydrate-safe danmaku settings init without render localStorage

This commit is contained in:
noelorin 2026-09-26 22:54:56 +08:00
parent cb770d1e56
commit 5b30f43252
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/web/src/components/pages/DanmakuSettingsBody.tsx
View File

@ -80,14 +80,25 @@ function Inner(props: { locale: Locale }) {
const save = trpc.media.danmakuSaveSettings.useMutation();
const filledFromServer = useRef(false);
const initial = readSettings();
const [enabled, setEnabled] = useState(initial.enabled);
const [opacity, setOpacity] = useState(initial.opacity);
const [density, setDensity] = useState(initial.density);
const [blockKeywords, setBlockKeywords] = useState<string[]>(initial.blockKeywords);
const [blockTypes, setBlockTypes] = useState<BlockType[]>(initial.blockTypes);
// SSR 与水合首帧共用 FALLBACK，避免 localStorage 差异导致 hydration 不一致
const [enabled, setEnabled] = useState(FALLBACK.enabled);
const [opacity, setOpacity] = useState(FALLBACK.opacity);
const [density, setDensity] = useState(FALLBACK.density);
const [blockKeywords, setBlockKeywords] = useState<string[]>(() => []);
const [blockTypes, setBlockTypes] = useState<BlockType[]>(() => []);
const [kwInput, setKwInput] = useState("");
// 挂载后再读 localStorage 作初值/回退（客户端 only）
useEffect(() => {
const local = readSettings();
if (filledFromServer.current) return;
setEnabled(local.enabled);
setOpacity(local.opacity);
setDensity(local.density);
setBlockKeywords(local.blockKeywords);
setBlockTypes(local.blockTypes);
}, []);
useEffect(() => {
const data = prefsQuery.data;
if (!data || filledFromServer.current) return;