React中嵌套JSON数据渲染为HTML表格的问题求解

我看了你的代码，这里有几个关键问题导致表格渲染失败，咱们一步步来修复：

问题分析 #

1. useEffect无限循环：你的useEffect没有设置依赖数组，这会导致组件每次渲染都重新执行请求，不仅浪费资源，还可能导致状态混乱。
2. 错误包装API响应：你把result.data（本身是一个包含Countries数组的对象）用Array(response)转成了数组，这就导致infectionData.response变成了[API返回的对象]，之后你试图访问infectionData.response.Countries，但数组是没有Countries这个属性的，自然会报错。
3. 加载状态设置时机错误：你在调用fetchData()之后立刻执行setLoaded(true)，但fetchData是异步函数，这时候数据还没获取到，组件会先尝试渲染空/未定义的数据，导致报错。
4. 初始状态不匹配：初始的infectionData是{ response: [] }，但你之后期望response是一个包含Countries的对象，结构不匹配会导致渲染时的undefined问题。

修正后的代码 #

1. 修复状态与请求逻辑 #

import { useState, useEffect } from 'react';
import axios from 'axios';

// 初始化状态时，让response的结构和API返回的一致，避免初始渲染报错
const [infectionData, setInfectionData] = useState({ response: { Countries: [] } });
const [isLoaded, setLoaded] = useState(false);
const [error, setError] = useState(null); // 新增错误状态，方便处理请求失败的情况

useEffect(() => {
  const fetchData = async () => {
    try {
      const url = "https://api.covid19api.com/summary";
      const result = await axios.get(url);
      // 直接把API返回的对象赋值给response，不需要转成数组
      setInfectionData({ response: result.data });
      setLoaded(true);
    } catch (err) {
      setError(err.message);
      setLoaded(true); // 请求失败也标记加载完成，方便显示错误信息
    }
  };

  fetchData();
}, []); // 空依赖数组，确保只在组件挂载时执行一次请求

2. 修复表格渲染逻辑 #

{/* 先处理加载和错误状态 */}
{!isLoaded && <div>Loading...</div>}
{error && <div>Error: {error}</div>}
{isLoaded && !error && (
  <Table bordered hover className="mt-3 w-75">
    <thead>
      <tr>
        <th>Country</th>
        <th>Total Infection</th>
        <th>New Deaths</th>
      </tr>
    </thead>
    <tbody>
      {/* 现在可以直接访问infectionData.response.Countries，因为response是API返回的对象 */}
      {infectionData.response.Countries.map((item) => (
        <tr key={item.CountryCode}> {/* 一定要加key，React列表渲染的要求 */}
          <td>{item.Country}</td>
          <td>{item.TotalConfirmed}</td>
          <td>{item.NewDeaths}</td>
        </tr>
      ))}
    </tbody>
  </Table>
)}

额外注意点 #

• 列表渲染时一定要给每个tr加上唯一的key属性（这里用CountryCode是合适的，因为每个国家的代码唯一），避免React的警告。
• 添加错误状态可以让你在API请求失败时给用户友好的提示，而不是直接崩溃。
• 初始状态设置成和API返回结构一致的空数据，能避免组件初始渲染时因为访问undefined的属性而报错。

内容的提问来源于stack exchange，提问作者Foxtrot 1-5