React技术问题：无法遍历从Express API获取的数据

错误原因 #

1. 初始State类型不匹配：你把data的初始值设为数组[]，但API返回的是包含key1、key2的对象。组件首次渲染时，data是数组，不存在key1属性，调用forEach时就会抛出data.key1 is undefined的错误。而JSON.stringify(undefined)只会输出undefined，不会触发报错，所以这部分能正常显示。
2. 遍历方法错误：forEach没有返回值，就算data.key1存在，也不会生成任何React元素，无法渲染内容，应该用map来生成元素数组。

修正方案 #

步骤1：修正初始State类型

把初始State改成空对象{}，和API返回的结构保持一致：

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

步骤2：安全遍历并渲染元素

使用**可选链操作符?.**避免空值报错，同时用map替代forEach生成渲染元素，还要给列表元素添加唯一key：

完整修正代码

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

export default function Home() {
    const [data, setData] = useState({});

    const fetchData = () => {
        return fetch("http://localhost:1337/")
            .then((response) => response.json())
            .then((data) => setData(data));
    }

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

    return (
        <div className="h-screen">
            <div className="container mx-auto py-10 h-full text-white">
                {JSON.stringify(data["key1"])}
                {JSON.stringify(data["key2"])}
                {/* 安全遍历并渲染 */}
                {data.key1?.map((item, index) => (
                    <div key={index}>{JSON.stringify(item)}</div>
                ))}
            </div>
        </div>
    );
}

额外提示 #

• React中要用className替代class：JSX里class是JavaScript保留字，对应HTML的class属性需要写className。
• 列表元素的key：示例中用index作为临时key，实际项目建议使用数据项的唯一标识（比如item的id），避免列表更新时出现渲染异常。

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