Question

我正在尝试使用useNavigation（）钩子与react-navigation交互，以响应我在useEffect（）中注册的回调。短毛猫警告我useEffect（）缺少依赖项。如果将导航挂钩添加为依赖项，则效果会持续运行。我正试图避免这种情况，并想知道是否有一种正确的方法，而不是忽略棉短绒的错误。

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

这可能是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钩子返回一个 function 由它的“用户”而不是一个具有所有功能的对象调用会更有意义吗？

这里是一个例子：

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");
}, []);

有正确的方法可以将useNavigation（）挂钩与useEffect（）依赖项一起使用吗？

1 个答案: