React Navigation组件出现Hooks调用顺序变化报错如何解决？

问题根因 #

你代码里在调用React.useRef之前写了提前返回的逻辑：

const rootStore = useStore();
const { authStore } = rootStore;
// 这里提前返回时，还没有执行后续的useRef调用
if (authStore.token === undefined) return null;

const routeNameRef = React.useRef<string>();
const navigationRef = React.useRef<NavigationContainerRef>();

当authStore.token为undefined时，本次组件渲染只调用了1个Hook（useStore内部本质是useContext）；当token存在时，组件会额外调用2个useRef Hook，两次渲染的Hook数量、调用顺序不一致，直接触发了你看到的报错。

修复方案 #

把所有Hook的调用都移到任何提前返回逻辑之前即可：

export const Navigation = () => {
  // 所有Hook放在组件逻辑最顶部，优先执行
  const rootStore = useStore();
  const routeNameRef = React.useRef<string>();
  const navigationRef = React.useRef<NavigationContainerRef>();
  const { authStore } = rootStore;

  // 提前返回逻辑放在所有Hook调用之后
  if (authStore.token === undefined) return null;

  // 剩余原有逻辑保持不变即可
  function onReady() {
    routeNameRef.current = navigationRef.current.getCurrentRoute().name;
  }
  // ...其余原有业务逻辑
}

React Hooks核心规则科普 #

• 只在React函数组件的最顶层调用Hook：不能在循环、条件判断、嵌套函数里调用Hook，也不能在任何提前return的逻辑之后调用Hook。React是靠Hook的调用顺序来对应存储每个Hook的状态的，只要某一次渲染少调用、多调用或者调换了Hook顺序，就会出现状态对应错误，触发报错。
• 只在React函数组件或者自定义Hook中调用Hook：不要在普通JS函数里调用Hook。

内容的提问来源于stack exchange，提问作者Jake Giles-Phillips