使用useEffect React Hook时如何解决缺少依赖项警告？ [英] How to fix missing dependency warning when using useEffect React Hook?

问题描述

使用React 16.8.6（在16.8.3之前的版本中很好），当我尝试防止对获取请求的无限循环时，出现此错误

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

我一直无法找到停止无限循环的解决方案。我想避免使用 useReducer（）。我确实找到了这个讨论 https://github.com/facebook/react/issues/14920可能的解决方法是如果您认为自己知道自己在做什么，就可以始终// // eslint-disable-next-line react-hooks / exhaustive-deps。 我对自己在做什么并不充满信心，所以我还没有尝试实现它。

I've been unable to find a solution that stops the infinite loop. I want to stay away from using useReducer(). I did find this discussion https://github.com/facebook/react/issues/14920 where a possible solution is You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing. I'm not confident in what I'm doing so I haven't tried implementing it just yet.

我有这个当前设置反应钩子useEffect持续/无限循环，唯一的注释是关于 useCallback（）我不熟悉。

I have this current setup React hook useEffect runs continuously forever/infinite loop and the only comment is about useCallback() which I'm not familiar with.

我目前如何使用 useEffect（）（我只想像 componentDidMount（））

How I'm currently using useEffect() (which I only want to run once in the beginning similar to componentDidMount())

useEffect(() => {
    fetchBusinesses();
  }, []);

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

推荐答案

如果除其他地方未使用fetchBusinesses方法效果，您只需将其移入效果并避免出现警告

If you aren't using fetchBusinesses method anywhere apart from the effect, you could simply move it into the effect and avoid the warning

useEffect(() => {
    const fetchBusinesses = () => {
       return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
  fetchBusinesses();
}, []);

但是，如果您在渲染之外使用fetchBusinesses，则必须注意两件事

If however you are using fetchBusinesses outside of render, you must note two things

1. 您是否有任何问题 not 传递 fetchBusinesses 作为方法


2. 您的方法是否依赖于它从封闭包中收到的一些变量？


3. 在每个渲染中，都会重新创建fetchBusinesses，因此将其传递给useEffect会引起问题。因此，首先，如果要将fetchBusinesses传递到依赖项数组，则必须记住它。

1. Is there any issue with you not passing fetchBusinesses as a method when it's used during mount with its enclosing closure?
2. Does your method depend on some variables which it receives from its enclosing closure? This is not the case for you.
3. On every render, fetchBusinesses will be re-created and hence passing it to useEffect will cause issues. So first you must memoize fetchBusinesses if you were to pass it to the dependency array.

总而言之，如果您在 useEffect 之外使用 fetchBusinesses 您可以使用 // eslint-disable-禁用规则next-line react-hooks / exhaustive-deps 否则，您可以将方法移到useEffect

To sum it up I would say that if you are using fetchBusinesses outside of useEffect you can disable the rule using // eslint-disable-next-line react-hooks/exhaustive-deps otherwise you can move the method inside of useEffect

中以禁用规则，您可以这样写

To disable the rule you would write it like

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

这篇关于使用useEffect React Hook时如何解决缺少依赖项警告？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！