使用 n useEffect 了解详尽的 deps ESlint 警告

Question

我似乎无法理解正确的方法。想要摆脱警告而不是让内联忽略警告评论。大概useCallback是解决方案的方向。我只想检查一次功能组件是否有条件地初始化功能组件是否需要商店。就这些了。

Line 72:6: React Hook useEffect has missing dependencies: 'dispatch' and 'storedSlugItems'. Either include them or remove the dependency array react-hooks/exhaustive-deps

useEffect(() => {
  if (storedSlugItems.length > 0) {
    dispatch(setSlugItems(storedSlugItems));
  }
  // eslint-disable-next-line 
}, []);

Answer 1

只需将 dispatch 添加到 useEffect 依赖项：

useEffect(() => {
  if (storedSlugItems.length > 0) {
    dispatch(setSlugItems(storedSlugItems));
  }
}, [dispatch]);

dispatch 是什么以及它来自哪里可能也很重要，但是将它添加到依赖项中应该会起作用。

如果是 Redux dispatch - 只要将同一个商店实例传递给 .通常，该商店实例在应用程序中永远不会更改。

然而，React hooks lint 规则不知道 dispatch 应该是稳定的，并且会警告应该将 dispatch 变量添加到 useEffect 和 useCallback 的依赖数组中。最简单的解决方案就是这样做 - 将其添加到依赖项:)

使用 n useEffect 了解详尽的 deps ESlint 警告

Understanding Exhaustive deps ESlint warning with n useEffect

reactjs

react-hooks

eslint

use-effect

usecallback