React Navigation V6 在 useFocusEffect 中使用 useCallback 问题无效钩子调用

Question

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",

Answer 1

我遇到了同样的问题，但我通过删除 useFocusEffect() 内的箭头函数来删除它。我认为这是错误提到的规则破坏。然而，我对此并不能百分百确定。如果移动箭头功能，该错误应该会得到解决。请看看我的代码的新旧版本。

旧版

useFocusEffect(() => {
    React.useCallback(() => {
      mobxCentralStore
        .udpateFoo()
        .then(() => {})
        .catch(() => {});

      screenStore.lastTimeMsUpdateFoo;
    }, [])});

新版本

useFocusEffect(
    React.useCallback(() => {
      mobxCentralStore
        .updateFoo()
        .then(() => {})
        .catch(() => {});

      screenStore.lastTimeMsUpdateFoo;
    }, []),
  );