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

使用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()。我确实找到了关于'筋疲力尽-deps' lint规则#14920的讨论[ESLint]反馈，其中一个可能的解决方案是，如果你认为你知道你在做什么，你可以总是// ESLint - disabled -next-line react-hooks/详尽-deps。我对我正在做的事情没有信心，所以我还没有尝试实现它。

我有这个当前的设置，React钩子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
      });
  };

当前回答

下一行禁用ESLint即可;

useEffect(() => {
   fetchBusinesses();
// eslint-disable-next-line
}, []);

通过这种方式，您使用它就像使用组件挂载(调用一次)一样。

更新

const fetchBusinesses = useCallback(() => {
 // Your logic in here
 }, [someDeps])

useEffect(() => {
   fetchBusinesses();
// No need to skip the ESLint warning
}, [fetchBusinesses]);

fetchBusinesses将在每次someDeps更改时被调用。

2019-05-22 10:35:44

其他回答

const [mount, setMount] = useState(false)
const fetchBusinesses = () => {
   // Function definition
}
useEffect(() => {
   if(!mount) {
      setMount(true);
      fetchBusinesses();
   }
},[fetchBusinesses, mount]);

这个解决方案非常简单，你不需要重写ESLint警告。只需维护一个标志，以检查组件是否已挂载。

2020-05-19 13:02:40

本文是关于使用钩子获取数据的很好的入门读物:https://www.robinwieruch.de/react-hooks-fetch-data/

本质上，在useEffect中包含fetch函数定义:

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theUrl"...
      // ...your fetch implementation
    );
  }

  fetchBusinesses();
}, []);

2019-04-25 01:51:31

似乎在组件中声明了fetchBusinesses函数。这意味着在每次渲染中，它都声明了触发钩子的新函数。

有两种方法可以解决这个问题。

将fetchBusinesses函数声明移出组件。使用useCallback钩子包装fetchBusinesses函数。

第一种选择更可取。

2021-09-25 08:26:47

这不是一个特定于问题用例的答案，而是更普遍的情况，并涵盖了useEffect或提取和导入不工作的情况。 useRef senario:

有时情况是，useEffect应该有一个空数组，你仍然想在useEffect部分的状态中使用，但仍然不想将它们作为依赖注入，你也可以尝试useCallback，现在react抱怨useCallback的依赖，你卡住了。在这种情况下，在某些情况下可以使用useRef。例如:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

在使用这种技术时，您应该小心，并注意useRef不会激活渲染进程。

2021-10-28 09:23:55

搜索关键字以了解有关每个警告的更多信息。要忽略，在前一行添加// eslint-disable-next-line。

例如:useEffect中使用的函数正在引起警告

useEffect（（） => { handleConnectWallet（）; }, []);

要忽略警告，我们只需在警告行之前添加“// eslint-disable-next-line”。

useEffect(() => { handleConnectWallet (); / / eslint-disable-next-line },[]);

2022-07-21 06:12:35

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

推荐文章

最新文章

标签