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

Question

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

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

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

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 钩子返回一个可由钩子的使用者调用的函数 而不是一个具有所有功能的对象不是更有意义吗？

这是一个例子：

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 钩子：

const navigation = useRef(useNavigation());

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