React调用后端接口未等请求完成报map undefined错误如何解决

你遇到的报错是因为nocs的初始状态为undefined：React组件首次渲染时，useEffect中的异步接口请求还未完成，setNoc尚未触发赋值，此时直接对undefined调用map方法就会抛出类型错误。偶尔能正常渲染是极端情况下接口响应速度快到在首次渲染前就完成了赋值，属于不可复现的偶发情况，不需要额外引入延迟等待逻辑，只要做好初始值设置和状态判断即可解决。

下面是三种可行的修复方式，可按需选择：

• 方案1：设置初始默认值
  直接给useState设置空数组作为初始值，首次渲染时对空数组调用map不会报错，接口返回后自动更新渲染：

// 仅修改useState声明即可
const [nocs, setNoc] = useState([]);

• 方案2：添加可选链调用（兼容不确定返回值的场景）
  如果接口有可能返回非数组类型，可以用可选链做安全调用，nocs为undefined/null时会直接返回undefined，不会执行map：

// 仅修改渲染部分的代码
{nocs?.map(noc => <div>{noc.region}</div>)}

• 方案3：增加加载/空状态判断（用户体验更友好）
  可以额外添加加载状态、错误处理逻辑，覆盖请求中、请求失败的场景：

import { React, useEffect, useState } from 'react'

export const Noc = () => {
    const [nocs, setNoc] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchNoc = async () => {
            try {
                const response = await fetch('http://localhost:8080/countrydefinitions');
                if (!response.ok) throw new Error('接口请求失败')
                const data = await response.json();
                setNoc(Array.isArray(data) ? data : []);
            } catch (err) {
                setError(err.message)
            } finally {
                setLoading(false)
            }
        };
        fetchNoc();
    }, [])

    if (loading) return <div>加载中...</div>
    if (error) return <div>加载失败：{error}</div>

    return <div>
        <div>NOC LIST</div>
        {nocs.length === 0 ? <div>暂无国家数据</div> : nocs.map(noc => <div>{noc.region}</div>)}
    </div>
}

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