如何修复使用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-disable-next-line。

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

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

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

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

2022-07-21 06:12:35

其他回答

你可以这样尝试:

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
        });
  };

and

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

如果您根据特定的id获取数据，则在回调中添加useEffect [id]。然后它就不能显示警告 React钩子useEffect有一个缺失的依赖:'any thing'。要么包含它，要么删除依赖数组

2020-07-11 10:19:31

./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

这不是一个JavaScript/React错误，而是一个ESLint (ESLint -plugin- React -hooks)警告。

它告诉你这个钩子依赖于fetchBusinesses函数，所以你应该把它作为一个依赖项传递。

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

如果函数在组件中声明，则可能导致在每次渲染时调用该函数:

const Component = () => {
  /*...*/

  // New function declaration every render
  const fetchBusinesses = () => {
    fetch('/api/businesses/')
      .then(...)
  }

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

  /*...*/
}

因为每次用新的引用重新声明函数时。

正确的做法是:

const Component = () => {
  /*...*/

  // Keep the function reference
  const fetchBusinesses = useCallback(() => {
    fetch('/api/businesses/')
      .then(...)
  }, [/* Additional dependencies */])

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

  /*...*/
}

或者只是在useEffect中定义函数。

更多:[ESLint]关于'枯竭-deps' lint规则#14920的反馈

2019-04-25 07:32:52

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

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

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

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

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

2022-07-21 06:12:35

你正在使用useEffect，当你这样做的时候，你经常会想要使用一些变量作为你的组件中的道具或状态。

eslint中有一个规则，它希望你引用useEffect依赖数组中任何不同的道具或状态块。这是控制何时执行useEffect的数组。该规则希望看到它列在数组中，数组决定何时重新运行useEffect函数。

因此，您需要添加[fetchBusinesses]，这样警告就会消失。