如何修复使用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
      });
  };

当前回答

好吧，如果你想从不同的角度来看这个问题，你只需要知道React有哪些非耗尽的选项。你不应该在效果中使用闭包函数的原因之一是在每次渲染时，它都会被重新创建/销毁。

因此，钩子中有多个React方法被认为是稳定的和非耗尽的，在这些方法中，您不必应用到useEffect依赖项，并且反过来也不会破坏React -hooks/竭-deps的约定规则。例如，useReducer或useState的第二个返回变量是一个函数。

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // Non-exhausted - ESLint won't nag about this
}, []);

所以反过来，你可以让所有的外部依赖关系与你在reducer函数中的当前依赖关系共存。

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // Logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

2020-12-09 06:56:01

其他回答

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

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

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

第一种选择更可取。

2021-09-25 08:26:47

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

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

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

为什么这个规则要我们把它写在这里?

在某些情况下，使用useEffect而没有正确列出数组内的所有状态和道具，可能会导致奇怪且难以调试的问题。

因此，这条规则有助于避免使用useEffect可能出现的那些难以理解的问题。

现在，任意添加到该数组也会导致错误。所以无论哪种方式，你都遇到了必须解决的bug。根据你的评论，似乎为你解决了这个问题，但我想进一步调查，看看你是否有机会在你的网络选项卡在Chrome中添加fetchBusinesses函数到你的useEffect数组后得到第二个GET请求。

2022-05-05 17:18:35

这些警告对于查找不一致更新的组件非常有帮助:从依赖项列表中省略函数是否安全?

然而，如果你想在你的项目中删除警告，你可以添加到你的ESLint配置:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }

2020-03-30 16:24:38

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

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

2020-05-19 13:02:40

下一行禁用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

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

推荐文章

最新文章

标签