React调用自定义API出现TypeError: video.map is not a function错误求助

你遇到的TypeError: video.map is not a function错误，核心原因是你调用map的video不是数组——map是JavaScript数组的专属方法，只有数组才能调用它。结合你的代码，具体原因和修复方案如下：

可能的原因 #

1. API返回的数据并非数组 #

你的代码假设http://localhost:8080/api/video返回的是数组，但实际可能是：

• 单个视频对象（比如{id: 1, title: "xxx"}）
• 包含数组的嵌套对象（比如{code: 200, data: [...]}）
• 甚至是null、undefined或其他非数组类型

可以在请求代码里打印返回值确认：

const result = await Axios(`http://localhost:8080/api/video`);
console.log("API返回数据:", result.data); // 查看控制台输出的类型和结构

2. 状态管理与加载逻辑不同步 #

你的useEffect把video作为依赖项，同时用定时器延迟触发请求，导致状态更新逻辑混乱：

• 初始video为null，loading为true，定时器1秒后触发请求
• 请求完成后setVideo(result.data)，触发useEffect再次执行，此时if(video)会把loading设为false
• 如果此时video不是数组，渲染阶段直接调用video.map就会报错

3. 初始状态设置不合理 #

你把video的初始状态设为null，虽然有loading状态做判断，但一旦loading意外变为false（比如逻辑错误），null.map必然报错。

修复方案 #

方案1：确保API返回数组并修正状态逻辑 #

先确认API返回格式，然后调整useEffect的逻辑，把加载状态的控制放在请求流程里，避免依赖video导致的重复触发：

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

const VideoPage = () => {
    // 初始状态设为空数组，避免null导致的map报错
    const [videos, setVideos] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchVideoData = async ()=> {
            try {
                const result = await Axios(`http://localhost:8080/api/video`);
                // 校验返回数据是否为数组
                if (Array.isArray(result.data)) {
                    setVideos(result.data);
                } else {
                    // 如果返回单个对象，包装成数组；或者根据业务需求处理
                    setVideos(result.data ? [result.data] : []);
                    console.warn("API返回非数组数据，已自动转为数组");
                }
            } catch (error) {
                console.error("获取视频数据失败:", error);
                setVideos([]);
            } finally {
                // 请求完成（成功或失败）都关闭加载状态
                setLoading(false);
            }
        }

        fetchVideoData();
    }, []); // 空依赖项，仅组件挂载时执行一次请求

    return (
        <div>
            <h2>Video Info</h2>
            {loading ? <h3>Loading...</h3> : videos.map(video => (
                <a key={video.id} href={`video/${video.id}`}><p>{video.title}</p></a>
            ))}
        </div>
    );
}

export default VideoPage;

方案2：针对API返回非数组的场景调整渲染逻辑 #

如果API确实返回单个视频对象，直接渲染该对象即可，不需要map：

// 假设API返回单个对象，修改渲染部分
{loading ? <h3>Loading...</h3> : (
    <a key={video.id} href={`video/${video.id}`}><p>{video.title}</p></a>
)}

关键注意点 #

• 变量名尽量语义化：如果存储的是多个视频，用videos代替video，避免混淆单个对象和数组
• 始终对API返回数据做类型校验：前端不能完全信任后端返回的格式，添加类型判断可以避免意外报错
• 加载状态的控制要和请求流程绑定：用try/catch/finally确保无论请求成功或失败，都能正确关闭加载状态

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