如何修复React Hook useEffect缺少依赖'fetchData'的警告

你遇到的是React Hooks的exhaustive-deps规则警告，因为useEffect里调用了fetchData函数，但没把它加入依赖数组。下面是几种可行的解决办法：

方法1：将fetchData函数移到useEffect内部 #

直接把异步逻辑放到useEffect里，消除外部函数的依赖问题：

useEffect(() => {
  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await axios.request(options);
      setData(response.data.data);
    } catch (error) {
      setError(error);
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };

  fetchData();
}, []); // 若options是外部变量/state/props，需加入此依赖数组

方法2：用useCallback包裹fetchData #

如果fetchData需要在组件其他地方复用，用useCallback缓存函数，再把它加入useEffect的依赖数组：

import { useCallback, useEffect } from 'react';

// ...

const fetchData = useCallback(async () => {
  setIsLoading(true);
  try {
    const response = await axios.request(options);
    setData(response.data.data);
  } catch (error) {
    setError(error);
    console.log(error);
  } finally {
    setIsLoading(false);
  }
}, [options]); // 此处需加入fetchData用到的所有外部依赖，比如options

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

useCallback会确保只有当依赖（如options）变化时，fetchData才会重新创建，避免不必要的重复执行。

方法3：添加注释忽略警告（不推荐） #

如果你确定不需要监听fetchData的变化，可以添加注释让ESLint跳过检查：

useEffect(() => {
  fetchData();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

这种方法不推荐，容易掩盖真正的依赖问题，导致组件逻辑不一致。

内容的提问来源于stack exchange，提问作者Abratemmy