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

【问题标题】：How to fix missing dependency warning when using useEffect Hook使用 useEffect Hook 时如何修复缺少的依赖警告
【发布时间】：2021-12-27 04:56:49
【问题描述】：

我目前如何使用 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
      });
  };

【问题讨论】：

最简单的方法是将fetchBusinesses函数内的代码移动到useEffect钩子内并去掉fetchBusinesses函数。您还可以将整个函数移动到 useEffect 挂钩内。
这个答案吗？ stackoverflow.com/questions/55840294/…

标签： javascript reactjs ecmascript-6

【解决方案1】：

有多种方法可以处理此类警告。

正如@Yousaf 所说，只需将整个函数添加到您的 useEffect 中即可。

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

您可以使用 useCallback()

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

【讨论】：

【解决方案2】：

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

【讨论】：