条件 return 前必须调用所有 hooks

更新于 2026-06-16

**进入子层白屏、content area 全空、React 渲染 crash，若组件里有「提前 return」，第一嫌疑是 hooks 调用顺序被破坏，而不是后端数据格式。** 修法是把子层用到的 `useState / useRef / useEffect / useCallback` 全部移到任何条件 `return` 之前。

症状与机制

  • 初始在总览层：navStack.length === 0 → 执行到 if (isAtRoot) return (...)
  • 子层用到的 hooks 写在条件 return 之后，这一轮根本没被调用
  • 点击进入下一层：不再提前 return，React 发现「这个组件比上次多调用了一批 hooks」
  • React 判定 hook 顺序损坏 → 渲染崩溃 → 白屏

关键点：hooks 必须在每次 render 时以相同顺序、相同数量调用，不能放在条件 return 后面。这是组件结构问题，不是状态数据问题。

排查顺序（避免查错方向）

  1. 先看组件有没有「条件 return + 后面还有 hooks」的结构 —— 这是最低成本的一刀
  2. 再排除后端：command 返回格式不符、参数反序列化 panic
  3. 环境噪音要认出来：非 Tauri 环境（普通浏览器开 localhost）报 Cannot read properties of undefined (reading 'invoke') 是预期行为（没有 __TAURI__），不是 root cause

相关