使用API返回的JSON渲染React组件时.map方法无法显示内容

你的代码存在三个关键问题导致渲染无内容，逐一修正即可：

1. 初始状态未定义为数组 #

useState()默认值是undefined，首次组件渲染时data为undefined，直接调用map会引发错误（虽然你能看到console.log输出数据，但初始渲染阶段data还未赋值）。需要将初始状态设为空数组：

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

2. map回调未返回JSX元素 #

你在map里用大括号包裹逻辑，但没有显式返回<h1>元素——箭头函数使用大括号时必须手动写return，或者去掉大括号用隐式返回：

• 显式返回写法：

{data.map((item, i) => {
    return <h1 key={i}>{item.Team}</h1>
})}

• 隐式返回写法（更简洁）：

{data.map((item, i) => (
    <h1 key={i}>{item.Team}</h1>
))}

3. 字段名大小写不匹配 #

API返回的字段是大写首字母的Team，但你代码里写的是item.team（小写），导致无法读取到正确的值，需改为item.Team。

修正后的完整Home.js代码：

const Home = () => {

    const [data, setData] = useState([]); // 初始化为空数组
    const getData = async () => {
        try {
            const res = await fetch('url');
            const data = await res.json();
            setData(data);
            console.log(data);
        } catch (error) {
            console.log(error)
        }
    }

    useEffect(() => {
        getData();
    }, [])

    return (
        <div>
            Home
            {data.map((item, i) => (
                <h1 key={i}>{item.Team}</h1>
            ))}
        </div>
    );
}

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