React Hooks结合Axios获取API数据时无限循环问题求助

核心问题分析 #

你的代码存在两个关键问题，直接导致无限循环和数据设置异常：

1. useEffect依赖数组错误：依赖里的[{}]是每次渲染都会重新创建的空对象，React用引用比较依赖时，会判定每次依赖都不同，进而反复触发useEffect、调用fetchData、更新state，形成无限循环。
2. Axios调用参数错误：axios.get的第二个参数是请求配置对象，你直接在里面写console.log(res.data)属于无效语法，不仅会导致请求配置错误，这里的res此时还未定义。

修复后的代码实现 #

1. 基础组件代码修复 #

import { useState, useEffect } from 'react';
import axios from 'axios';

const YourComponent = () => {
    const [data, setData] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const fetchData = async () => {
        try {
            setLoading(true);
            // 修正Axios调用：第二个参数为配置对象（如headers、params等），无需在此打印数据
            const res = await axios.get('apiUrl');
            console.log(res.data);
            setData(res.data);
            setError(null);
        } catch (error) {
            console.error(error);
            setError(error.message);
            setData({});
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        // 空数组依赖确保仅在组件挂载时执行一次请求
        fetchData();
    }, []);

    if (loading) return <div>加载中...</div>;
    if (error) return <div>请求错误：{error}</div>;

    return (
        <div>
            {/* 格式化渲染返回的数据 */}
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

export default YourComponent;

2. 封装为可复用的自定义Hook #

按照你的需求，将数据获取逻辑抽成自定义Hook，方便在多个组件中复用：

import { useState, useEffect } from 'react';
import axios from 'axios';

const useFetchData = (apiUrl) => {
    const [data, setData] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const fetchData = async () => {
        try {
            setLoading(true);
            const res = await axios.get(apiUrl);
            setData(res.data);
            setError(null);
        } catch (error) {
            console.error(error);
            setError(error.message);
            setData({});
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData();
        // 若API地址会动态变化，将apiUrl加入依赖数组，URL更新时自动重新请求
    }, [apiUrl]);

    return { data, loading, error };
};

export default useFetchData;

自定义Hook的使用示例 #

import useFetchData from './useFetchData';

const YourComponent = () => {
    const { data, loading, error } = useFetchData('你的实际API地址');

    if (loading) return <div>加载中...</div>;
    if (error) return <div>请求错误：{error}</div>;

    return (
        <div>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

export default YourComponent;

关键注意事项 #

• useEffect依赖数组：仅需挂载时请求用空数组[]；若API地址动态变化，将apiUrl加入依赖，实现URL变更时自动重新请求。
• Axios配置规范：axios.get的第二个参数用于设置请求头、URL参数等配置，示例：axios.get(apiUrl, { headers: { 'Authorization': 'Bearer token' } })。
• 用户体验优化：加入loading和error状态，避免渲染空数据或直接暴露报错信息。

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