如何修复使用useEffect React挂钩时丢失的依赖项警告？

Question

使用React 16.8.6（在以前的版本16.8.3上很好）时，当我试图防止fetch请求上的无限循环时，会出现这个错误

./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/exalittive-deps。我对自己在做什么不太有信心，所以我还没有尝试实现它。

我有这个当前的设置React hook useEffect runs continuous forever/infinite loop，唯一的注释是关于useCallback()，我不熟悉。

当前如何使用useEffect()（我只想在开始时运行一次，类似于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
      });
  };

Answer 1

如果您没有在效果之外的任何地方使用FetchBusinesss方法，您可以简单地将它移到效果中并避免出现警告

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

但是，如果您在render之外使用FetchBusiness，则必须注意两件事

1. 当fetchbusiness在带封闭闭包的挂载过程中使用时，您不将其作为方法传递，这有问题吗？
2. 您的方法是否依赖于它从封闭闭包中接收的一些变量？您的情况并非如此。
3. 在每次呈现时，fetchBusinesses都将被重新创建，因此将其传递给useEffect会引起问题。因此，如果要将FetchBusinesss传递给依赖项数组，首先必须将其记忆。

综上所述，如果您在useEffect之外使用fetchbusiness，您可以使用//eslint-disable-next-line react-hooks/exalttive-deps禁用规则，否则您可以在useEffect中移动该方法

若要禁用该规则，您可以将其编写为

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

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