是否有正确的方法将 useNavigation() 挂钩与 useEffect() 依赖项一起使用？

Question

我正在尝试使用 useNavigation() 挂钩与反应导航交互，以响应我在 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>
  );
}

工作 Codesandbox： https://codesandbox.io/s/usenavigation-95kql

如果您仍然想保留这个“架构”，您可以使用useRef像这样的钩子：

const navigation = useRef(useNavigation());

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