react-native - 是否有正确的方法使用 useNavigation() 钩子(Hook)和 useEffect() 依赖项？

Question

我正在尝试使用 useNavigation() Hook 与 react-navigation 交互，以响应我在 useEffect() 中注册的回调。 linter 警告我 useEffect() 缺少依赖项。如果我将导航钩子(Hook)添加为依赖项，效果会持续运行。我试图避免这种情况，并想知道除了忽略 linter 错误之外是否还有正确的方法。

不提供依赖数组会导致效果持续触发的相同行为。

这可能是 react-navigation-hooks 包中的 useNavigation() Hook 如何工作的潜在问题。

function MyComponent() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.navigate('Home');
    }, []);
}

结果是:
React Hook useEffect has a missing dependency: 'navigation'. Either include it or remove the dependency array.

Answer 1

只是一个自以为是的猜测:这更多是关于您的“架构”的问题。
例如:对于自定义 useNavigation 是否更有意义？钩子(Hook)返回一个可以由钩子(Hook)的使用者调用的函数，而不是一个具有所有功能的对象？
这是一个例子:

const useNavigation = () => {
  const [routes, setRoutes] = useState(null);
  ...

  const navigate = (destination: string) => {
    console.log("navigated to ", destination);
  };

  return { navigate, routes };
};

function App() {
  const { navigate } = useNavigation();

  return (
    <div className="App">
      <h1>Parent</h1>
      <button onClick={() => navigate("Home")}>Navigate me!</button>
    </div>
  );
}

工作密码箱: https://codesandbox.io/s/usenavigation-95kql

如果你仍然想保留这个“架构”，你可以使用 useRef像这样钩子(Hook):

const navigation = useRef(useNavigation());

useEffect(() => {
  navigation.current.navigate("Home");
}, []);