钩子错误从上下文到使用顺序的变化效果

Question

错误警告：React 检测到身份验证页面调用的钩子顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读钩子规则：https://reactjs.org/link/rules-of-hooks

代码：

import React, { useContext, useEffect, useState } from 'react';
import { Keyboard } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { getCredentials } from '../util/Storage';
import { OrderContext } from '../OrderContext';
import { UserContext } from '../UserContext';

const AuthPage = ({ navigation }) => {
  const userContext = useContext(UserContext);
  const orderContext = useContext(OrderContext);
  const [isKeyboardVisible, setKeyboardVisibile] = useState(false);
  useEffect(() => {
    const getCreds = async () => {
      const c = await getCredentials();
      if (c) {
        navigation.replace('Home' : 'StartWizard');
      }
    };
    getCreds();
  }, []);

  const keyboardDidShow = () => {
    setKeyboardVisibile(true);
  };

  const keyboardDidHide = () => {
    setKeyboardVisibile(false);
  };

  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', keyboardDidShow);
    Keyboard.addListener('keyboardDidHide', keyboardDidHide);

    return () => {
      Keyboard.removeListener('keyboardDidShow', keyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', keyboardDidHide);
    };
  }, []);

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

  return (
    <AuthView ... />
      }}
    />
  );
};

const Auth = ({ navigation }) => <AuthPage navigation={navigation} />;
export default Auth;

为什么订单发生变化，我如何纠正这种行为？

Answer 1

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

永远不要有条件地调用钩子。这是钩子的规则

Answer 2

React总是期望调用相同的钩子，不管你的变量有什么值。

在这种情况下，您有条件地调用< code>useNavigation()挂钩，这完全打乱了React想要的内容。

要修复它，只需将钩子返回的值存储在临时变量中：

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

或者如果没有问题，无条件覆盖global.navigation

global.navigation = useNavigation();

我强烈建议阅读钩子的规则，这样你就可以避免将来出现这样的错误。