React.js映射JSON数据渲染失败，请求技术帮助

核心问题分析 #

你遇到的两个关键问题：

1. 渲染代码中引用了未定义的data变量，应该使用state中存储的items
2. 接口返回的是以UUID为键的对象，不是数组，无法直接用map遍历，必须先转换为数组

修复后的完整代码 #

import React from "react";
import './App.css';
import axios from 'axios';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            DataisLoaded: false
        };
    }

    componentDidMount() {
        axios
            .get("/.netlify/functions/getWisdomData")
            .then(response => response.data.data) // 提取内层的data对象
            .then((responseData) => {
                // 将UUID键的对象转换为带id的数组
                const itemsArray = Object.entries(responseData).map(([id, item]) => ({
                    id,
                    ...item
                }));
                this.setState({
                    items: itemsArray,
                    DataisLoaded: true
                });
            })
            .catch(error => {
                console.error('数据获取失败:', error);
                this.setState({ DataisLoaded: true });
            });
    }

    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div><h1> Loading.... </h1></div>;

        return (
            <div className="App">
                <h1> ME-TIME Quotes </h1>
                {/* 使用state中的items遍历 */}
                <ul>
                    {items.map((item) => (
                        <li key={item.id}>
                            <strong>Name:</strong> {item.name}<br />
                            <strong>Content:</strong> {item.content || item.collection}
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

export default App;

关键修复说明 #

• 解决data is not defined错误：将渲染时的data.map改为items.map，items是从state解构出的已存储数据。
• 处理响应结构：接口返回的实际数据在response.data.data中，需要正确提取这一层。
• 对象转数组：通过Object.entries()把对象转换为键值对数组，再将UUID作为id字段合并到每个item中，满足React列表渲染的key要求。
• 兼容内容字段：部分数据用collection存储内容，用||运算符确保所有内容都能正常显示。
• 错误处理：添加catch块处理请求失败的情况，避免页面一直停留在加载状态。

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