javascript 对于不需要在依赖项数组中的状态，获取“React Hook useEffect具有缺失的依赖项”错误

brqmpdu1 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(105)

我的eslint正在抱怨react-hooks/exhaustive-deps。我没有做错任何事情，函数应该只在pathname更改时运行：

const pathname = usePathname();

  useEffect(() => {
    setNavigation(
      navigation.map((item) => ({
        ...item,
        current:
          item.href.toLowerCase() === pathname?.substring(3).toLowerCase()
      }))
    );
  }, [pathname]);

我是否应该在该函数上使用eslint-disable-next-line react-hooks/exhaustive-deps禁用lint？
谢谢！

JavaScript

来源：https://stackoverflow.com/questions/75638129/getting-react-hook-useeffect-has-a-missing-dependency-error-for-a-state-that-d

1条答案

按热度按时间

rdrgkggo1#

Eslint的想法是，在依赖项中包含任何在useEffect外部定义的变量，并且在useEffect内部使用，所以回调中总是包含它们最近的值。
在您的示例中，要始终使用navigation的最新值，并且只在pathname发生变化时才运行useEffect，可以使用函数updater：

useEffect(() => {
  setNavigation((navigation) =>
    navigation.map((item) => ({
      ...item,
      current: item.href.toLowerCase() === pathname?.substring(3).toLowerCase(),
    }))
  );
}, [pathname]);

这样，您就不会从外部使用navigation，而是使用React将给予给状态设置器的值，确保它始终是一个新值。
边注：通常，禁用lint不是一个好主意，因为它可能会导致bug。

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 对于不需要在依赖项数组中的状态，获取“React Hook useEffect具有缺失的依赖项”错误

1条答案

相关问题

热门标签

最新问答