1

React navigation V6 文档展示了在 useFocusEffect 中使用 useCallback 的示例。但是，当我使用相同的代码时，我遇到了无效的挂钩调用。

链接：https ://reactnavigation.org/docs/use-focus-effect/

例子：

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

您可能会看到它的三个常见原因：

  1. 你可能有不匹配的 React 和 React DOM 版本。
  2. 您可能违反了 Hooks 规则。
  3. 您可能在同一个应用程序中拥有多个 React 副本。

据我了解，钩子只能在函数组件的主体内调用。但是，为什么文档中的上述示例不起作用？

包.json

 "@react-navigation/bottom-tabs": "^6.0.9",
 "@react-navigation/native": "^6.0.6",
 "@react-navigation/stack": "^6.0.11",
 "react": "17.0.2",
 "react-native": "0.65.1",
4

0 回答 0