React AuthPage组件Hooks调用顺序变更错误：原因分析及修复方法

问题根源 #

你遇到这个警告的核心原因，是违反了React Hooks的核心规则：所有Hooks必须在组件的顶层作用域按固定顺序调用，绝对不能放在条件判断、循环、嵌套函数或者return语句之后。

看你代码里这段：

if (!global.navigation) {
  global.navigation = useNavigation();
}

useNavigation()是一个React Hook，你把它放在了if条件内部——这就导致了两次渲染中Hook的调用顺序/数量不一致：

• 当global.navigation不存在时，本次渲染会调用useNavigation()
• 当global.navigation已经存在时，本次渲染就跳过了这个Hook的调用

React完全依赖Hook的调用顺序来跟踪每个Hook对应的状态，一旦顺序乱了，React就会把状态绑定到错误的Hook上，自然会抛出这个警告，甚至引发隐藏的bug。

修复步骤 #

1. 把Hook移到组件顶层

不管条件如何，先在组件最顶层调用所有需要的Hook，再处理逻辑判断：

const AuthPage = ({ navigation }) => {
  // 所有Hook都放在组件顶层，顺序固定
  const userContext = useContext(UserContext);
  const orderContext = useContext(OrderContext);
  const [isKeyboardVisible, setKeyboardVisibile] = useState(false);
  const nav = useNavigation(); // 移到顶层，固定调用

  // 然后再处理global的赋值逻辑
  if (!global.navigation) {
    global.navigation = nav;
  }

  // 后续的useEffect和其他逻辑保持不变
  useEffect(() => {
    const getCreds = async () => {
      const c = await getCredentials();
      if (c) {
        // 这里还要修正一个语法错误：三元运算符是?不是:
        navigation.replace(c ? 'Home' : 'StartWizard');
      }
    };
    getCreds();
  }, []);

  // ...其他代码
};

2. 顺便修复语法错误

你代码里的navigation.replace('Home' : 'StartWizard');是语法错误，三元运算符的正确写法是condition ? trueValue : falseValue，这里要改成符合逻辑的三元判断形式（比如示例里的c ? 'Home' : 'StartWizard'）。

额外提醒 #

记住React Hooks的两条核心规则：

• 只能在函数组件的顶层调用Hooks，不能在条件、循环、嵌套函数里调用
• 只能在React函数组件或者自定义Hook里调用Hooks

遵守这两条规则，就能避免绝大多数Hook相关的警告和bug。

内容的提问来源于stack exchange，提问作者JaeLeeSo