小编典典

使用 useEffect React Hook 时如何修复缺少的依赖警告

all

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

./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(). 我确实找到了 _[关于“exhaustive-deps” lint 规则

14920)_

其中一个可能的解决方案是You can always // eslint-disable-next-line react- hooks/exhaustive-deps if you think you know what you're doing.我对自己正在做的事情没有信心，所以我还没有尝试实施它。

我有这个当前的设置， React hook useEffect
永远/无限循环连续运行
，唯一的评论是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
      });
  };

阅读 425

2022-03-06

共1个答案

小编典典

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

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，则必须注意两件事

在挂载期间使用封闭闭包时，您没有 将fetchBusinesses其作为方法传递有什么问题吗？
你的方法是否依赖于它从封闭闭包中接收到的一些变量？这不是你的情况。
在每次渲染时，都会重新创建 fetchBusinesses，因此将其传递给 useEffect 会导致问题。因此，如果要将 fetchBusinesses 传递给依赖数组，首先必须记住它。

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

要禁用规则，您可以这样编写

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

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

2022-03-06