fix(hydration): PuaPanel placeholder 改用 useEffect 随机选取，修复 SSR/客户端 hydration 不匹配

2026-03-24 11:58:48 +00:00
parent dc9904b3f9
commit ee7222929a
1 changed files with 5 additions and 1 deletions
--- a/app/game/page.tsx
+++ b/app/game/page.tsx
@@ -261,7 +261,11 @@ function PuaPanel({ gameReady, hc, waveStarted }: { gameReady: boolean; hc: numb
  const [insufficient, setInsufficient] = useState(false)
  const [dupWarning, setDupWarning] = useState<string | null>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)
-  const placeholder = useRef(PUA_PLACEHOLDERS[Math.floor(Math.random() * PUA_PLACEHOLDERS.length)]).current
+  const [placeholder, setPlaceholder] = useState(PUA_PLACEHOLDERS[0])
+  useEffect(() => {
+    // 只在客户端随机选取，避免 SSR/客户端 hydration 不匹配
+    setPlaceholder(PUA_PLACEHOLDERS[Math.floor(Math.random() * PUA_PLACEHOLDERS.length)])
+  }, [])

  const cost = calcPuaCost(hc)
  const canAfford = hc >= cost