React Hook useEffect 缺失依赖警告：原理、场景与修复全指南

JJCTO袁龙

于 2025-07-17 14:07:03 发布

阅读量945

点赞数 28

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/yuanlong12178/article/details/149420643

react 专栏收录该内容

170 篇文章

订阅专栏

React Hook useEffect 缺失依赖警告：原理、场景与修复全指南

开发 React 函数组件时，你是否在控制台看到这样一条黄色提示？

React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array.

这条警告来自 ESLint 规则 react-hooks/exhaustive-deps，它提醒我们：useEffect 的依赖数组不完整，可能会引发闭包陷阱或过期值问题。本文将从原理出发，结合 4 个高频场景，给出具体修复方案，助你彻底告别这条提示。

一、为什么会出现这条警告？

useEffect 的第二个参数——依赖数组（deps），决定了副作用在哪些值发生变化时重新执行。
当 ESLint 检测到数组里遗漏了 effect 内部真正用到的值时，就会抛出警告，理由很简单：

遗漏的变量在组件重新渲染后可能已改变，但 effect 仍然引用旧值（闭包陷阱）。
遗漏的函数内部可能引用了其他状态，同样会导致过期引用。

二、4 个高频踩坑场景与修复

场景 1：直接使用外部变量却忘记加入 deps

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // 读取 count
    }, 1000);
    return () => clearInterval(id);
  }, []); // ❌ 缺少 count
}

问题：count 变化后，定时器仍然打印旧值。

修复：

useEffect(() => {
  const id = setInterval(() => {
    console.log(count);
  }, 1000);
  return () => clearInterval(id);
}, [count]); // ✅ 加入依赖

场景 2：函数未加入 deps，但其内部引用了状态

function Search() {
  const [keyword, setKeyword] = useState('');

  const fetchData = () => {
    console.log(keyword); // 读取 keyword
  };

  useEffect(() => {
    fetchData();
  }, []); // ❌ 缺少 fetchData
}

问题：keyword 改变后，fetchData 仍使用旧值。

方案 A：把函数移入 effect

useEffect(() => {
  const fetchData = () => {
    console.log(keyword);
  };
  fetchData();
}, [keyword]);

方案 B：使用 useCallback 包一层，再作为依赖

const fetchData = useCallback(() => {
  console.log(keyword);
}, [keyword]);

useEffect(() => {
  fetchData();
}, [fetchData]);

场景 3：deps 里写了但使用的是函数引用而非函数体

function User({ userId }) {
  const [user, setUser] = useState(null);

  const getUser = async (id) => {
    const res = await fetch(`/api/user/${id}`);
    setUser(await res.json());
  };

  useEffect(() => {
    getUser(userId);
  }, [userId]); // ✅ userId 已包含，但如果 getUser 内部依赖其他状态，仍需检查
}

注意：若 getUser 内部引用了其他状态（如 token），仍需按场景 2 处理。

场景 4：条件执行逻辑导致 ESLint 误判

function Demo({ flag }) {
  const [value, setValue] = useState(0);

  useEffect(() => {
    if (flag) console.log(value);
  }, [flag]); // ❌ ESLint 认为 value 没用到（实际用到）
}

修复：简单加入 value 即可。

useEffect(() => {
  if (flag) console.log(value);
}, [flag, value]);

三、常见疑问解答

疑问	回答
可以关闭这条规则吗？	不推荐。关闭规则会隐藏真实隐患，用 `// eslint-disable-next-line` 仅作为临时过渡。
把函数永远放在 deps 里会不会死循环？	不会，只要函数用 `useCallback` 包裹并稳定依赖即可。
空数组 `[]` 永远安全吗？	只适用于完全与组件状态无关的副作用（如一次性 DOM 测量、全局事件注册）。