使用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().我确实找到了这个讨论 [ESLint] 'exhaustive-deps' lint 规则的反馈 #14920 可能的解决方案是 如果你认为你知道你在做什么，你总是可以//eslint-disable-next-line react-hooks/exhaustive-deps. I对我正在做的事情没有信心，所以我还没有尝试实施它.

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 [ESLint] Feedback for 'exhaustive-deps' lint rule #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.

我有这个当前设置，React hook useEffect 运行不断地永远/无限循环，唯一的评论是关于我不熟悉的 useCallback().

我目前如何使用 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. 当 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- 禁用规则线 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屋！