遇React Hook useEffect依赖缺失报错，是否需禁用eslint规则？

首先明确ESLint报错的原因：你的useEffect回调里用到了navigation和setNavigation，但依赖数组里只加了pathname，这条规则要求所有在回调内引用的外部变量都必须加入依赖数组，所以才会触发警告。

要不要禁用规则，得看navigation的实际来源：

情况1：navigation是静态常量（比如组件外定义的固定导航数据） #

如果navigation是不会变化的静态数据，那你的逻辑完全没问题——确实只需要在pathname变化时更新导航状态。这时候可以安全禁用规则，但一定要加注释说明原因，避免后续维护时产生误解：

const pathname = usePathname();

// eslint-disable-next-line react-hooks/exhaustive-deps -- navigation是静态常量，仅需在pathname变化时更新导航激活状态
useEffect(() => {
  setNavigation(
    navigation.map((item) => ({
      ...item,
      current:
        item.href.toLowerCase() === pathname?.substring(3).toLowerCase()
    }))
  );
}, [pathname]);

情况2：navigation是组件内的状态（比如用useState声明的） #

如果navigation是组件的状态变量，直接禁用规则会有风险：当navigation本身发生变化时，useEffect不会重新执行，可能导致导航状态和最新的navigation数据不一致。

这种情况更推荐用函数式更新的方式调用setNavigation，它可以获取到最新的状态值，不需要把navigation加入依赖数组，同时也能满足只在pathname变化时执行的需求：

const pathname = usePathname();

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

这里setNavigation是React提供的稳定函数，不会随组件重渲染变化，所以不需要加入依赖数组，ESLint也不会再提示警告。

总结 #

不要盲目禁用规则，先明确navigation的类型：

• 静态数据：禁用+注释是合理的
• 状态变量：用函数式更新优化代码，既满足逻辑需求，又符合规则要求

内容的提问来源于stack exchange，提问作者Maxime Ghéraille