自定义 Hook 里怎么正确处理依赖数组？

Top丶瑞腾提问于 2026-03-02 00:11:19 阅读 7

框架

我写了个自定义 Hook 用来封装数据请求，但 useEffect 的依赖项总报错，说缺少某些变量。比如我用了 axios 实例和一个 url 参数，但加进去又导致无限循环，到底该怎么处理依赖数组才对？

这是我的代码：

function useFetchData(url) {
  const [data, setData] = useState(null);
  const api = axios.create({ baseURL: 'https://api.example.com' });

  useEffect(() => {
    api.get(url).then(res => setData(res.data));
  }, [url]); // 这里 ESLint 警告说 api 没加到依赖里
}

我来解答赞 19 收藏

反馈

1 条解答

司徒景荣 Lv1

这个问题我之前也踩过坑，React 的依赖数组确实让人头大。

你的问题根源在于 api 每次渲染都会重新创建一个新的实例，把它加到依赖数组里就会无限循环。

解决办法有两个，推荐第一种：

把 api 实例提到 Hook 外面，这样就只创建一次：

const api = axios.create({ baseURL: 'https://api.example.com' });



function useFetchData(url) {

  const [data, setData] = useState(null);



  useEffect(() => {

    api.get(url).then(res => setData(res.data));

  }, [url]); // 现在只有 url 是依赖项，没问题了

  

  return { data };

}

如果 api 必须根据某些条件动态创建，就用 useMemo 包一下：

function useFetchData(url) {

  const [data, setData] = useState(null);

  

  const api = useMemo(() => axios.create({ baseURL: 'https://api.example.com' }), []);



  useEffect(() => {

    api.get(url).then(res => setData(res.data));

  }, [url, api]);

  

  return { data };

}

顺便提醒一下，你的 Hook 没写 return 语句，外面用不了 data，记得加上。

希望能帮到你！依赖数组这块确实需要多注意，ESLint 的 exhaustive-deps 规则虽然烦，但大部分时候它的警告是有道理的。

2026-03-02 01:02