React JS中无法正确遍历Covid19 API返回的countries数组问题

DevOps 小满

2026-5-7

问题分析与解决

你遇到的核心问题是错误地使用了Object.keys()来遍历数组。this.state.countries是一个包含国家对象的数组，而Object.keys()用于提取对象的键名，当传入数组时，它会返回数组的索引字符串（比如"0"、"1"、"2"），这就是你只看到数字索引的原因。

正确的遍历方式

直接对countries数组调用数组原生的map()方法即可，这样每次迭代拿到的就是完整的国家对象，就能访问到Country、TotalConfirmed等字段了。另外别忘了给每个列表项添加唯一的key属性（推荐用每个国家的CountryCode，因为它是唯一的），避免React的性能警告。

修改后的代码片段

把你表格的<tbody>部分替换成下面的代码：

<tbody>
  {this.state.countries.map((country, index) => (
    <tr key={country.CountryCode}>
      <td>{index + 1}</td>
      <td>{country.Country}</td>
      <td>{country.TotalConfirmed}</td>
      <td>{country.TotalDeaths}</td>
      <td>{country.TotalRecovered}</td>
    </tr>
  ))}
</tbody>

额外优化建议

处理加载状态：你已经定义了isLoading状态，可以在数据未加载完成时显示加载提示：

{this.state.isLoading ? (
  <tr>
    <td colSpan="5" style={{textAlign: 'center'}}>Loading data...</td>
  </tr>
) : (
  // 上面的map遍历代码
)}

记得在componentDidMount里先把isLoading设为true，请求完成后再设为false：

async componentDidMount() {
  this.setState({ isLoading: true });
  try {
    const response = await api.get('/summary');
    this.setState({
      countries: response.data.Countries,
      totalConfirmed: response.data.Global.TotalConfirmed,
      isLoading: false
    });
  } catch (e) {
    this.setState({
      errorMessage: 'Failed to load global data',
      isLoading: false
    });
  }
}