有没有正确的方法来使用 useNavigation() 钩子和 useEffect() 依赖项? [英] Is there a proper way to use useNavigation() hook with useEffect() dependencies?

问题描述

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

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

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

function MyComponent() {const 导航 = useNavigation();useEffect(() => {导航.导航('家')；}, []);}

结果:

React Hook useEffect 缺少依赖项:导航".要么包含它，要么删除依赖数组.

解决方案

只是一个自以为是的猜测:这更像是一个关于你的架构"的问题.

例如:自定义 useNavigation 钩子返回一个 函数 是否更有意义，该函数可以由钩子的使用者而不是对象调用具有所有功能吗?

这是一个例子:

const useNavigation = () =>{const [路由，setRoutes] = useState(null)...const 导航 = (目的地:字符串) =>{console.log("导航到", 目的地)}返回 { 导航，路线 }}功能应用(){const {导航} = useNavigation();返回 (<div className="应用程序"><h1>父</h1><button onClick={() =>导航(主页")}>导航我！</button>

);}

工作代码沙盒:https://codesandbox.io/s/usenavigation-95kql

<小时>

如果你仍然想保留这个架构"，你可以像这样使用 useRef 钩子:

const navigation = useRef(useNavigation());useEffect(() => {navigation.current.navigate("首页");}, []);

I'm trying to interact with react-navigation using useNavigation() hook in response to a callback I'm registering in useEffect(). The linter is warning me that useEffect() has a missing dependency. If I add the navigation hook as a dependency, the effect continuously runs. I'm trying to avoid this and wondering if there is a correct way other than ignoring the linter error.

Providing no dependency array results in the same behavior where the effect continuously fires.

This may be an underlying issue with how the useNavigation() hook from react-navigation-hooks package works.

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

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

Results in:

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

解决方案

Just an opinionated guess: It's more a question regarding your "architecture".

For example: Wouldn't it make more sense for the custom useNavigation hook to return a function that can be called by the consumer of the hook instead of an object with all it's functionality?

Here is an example:

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>
  );
}

Working Codesandbox: https://codesandbox.io/s/usenavigation-95kql

---

If you nevertheless want to keep this "architecture", you could use a useRef hook like so:

const navigation = useRef(useNavigation());

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

这篇关于有没有正确的方法来使用 useNavigation() 钩子和 useEffect() 依赖项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！