使用useEffect与Axios请求接口返回空JSON/空数组如何解决

架构老林

2026-9-24

问题原因及解决方案

你最初猜测问题是未使用异步函数的判断不成立，Axios本身返回Promise，用then链完全可以正常处理异步请求，实际问题分为以下两类：

核心问题原因

状态异步更新导致的日志输出误解
React 中useState返回的更新函数是异步批量执行的，调用setVacations(res.data)后，当前作用域下的vacations还是本次渲染时的旧值（初始为空数组），所以你打印vacations得到空数组，不代表接口实际返回为空，直接打印res.data即可验证接口返回的真实数据。
map遍历无返回值导致渲染为空
你在vacations.map的回调函数中使用了花括号但未添加return语句，每轮遍历都会返回undefined，最终页面不会渲染任何内容，看起来就像拿到了空数组。
冗余的async关键字：你给then的回调加了async但没有用到await语法，属于无效代码，不会影响运行但没有实际作用。

修复方案

调整后完整代码

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

export function UseVacation (){
    const[vacations, setVacations] = useState([]);

    useEffect(() =>{
        // 改成async/await写法可读性更高，也可以保留原then链写法
        const fetchData = async () => {
            try {
                const res = await axios.get('APILINK');
                setVacations(res.data);
                // 打印res.data确认接口真实返回
                console.log("接口返回数据：", res.data);
            } catch (err) {
                alert("Error extracting the data from API: "+err);
            }
        }
        fetchData();
    }, [])

    return (
        <div>
            {/* 去掉花括号用隐式返回，也可以保留花括号加return关键字 */}
            {/* 注意必须加唯一key属性避免React渲染警告 */}
            {vacations.map((vac) => <h1 key={vac._id}>{vac._id}</h1>)}
        </div>
    )
}