React API Fetch 不返回所有数据但在索引时返回

Question

我的问题是我在 FetchData 类中获得了一个数据列表，请购买它的列表。我尝试为 countries: data.Countries[0] 建立索引，例如 0 它给了我这些值，但我希望所有数据都可以在此进行 foreach ?

使用国家/地区的索引获取：data.Countries[0]

获取不带国家/地区索引的数据：data.Countries

fetchData.js

import React, { Component } from 'react';
import Countries from './countries';

class FetchData extends Component {
    
    state = {
        loading: true,
        countries: null
    };

    async componentDidMount() {
        const url = 'https://api.covid19api.com/summary';
        const response = await fetch(url);
        const data = await response.json();
        this.setState({
            countries: data.Countries,
            loading: false
        });
    }
     
  render() {
    return (
        <div>
            {this.state.loading || !this.state.countries ? ( 
            <div>loading</div>
            ) : (
            <div> 
                <Countries WorldCountries={this.state.countries.Country} /> 
            </div>
            )}
        </div>
    );
  }
}

export default FetchData;

countries.js

import React, { Component } from 'react'; 

const Countries = (prop) => {
    return(
    <h1>{prop.Countries}</h1>
    );
}
export default Countries;

Answer 1

您的图片让我感到困惑，但如果我理解正确，您需要执行以下操作：

  // FetchData component
  ...
  render() {
    return (
        <div>
            {this.state.loading || !this.state.countries ? ( 
            <div>loading</div>
            ) : (
            <div>
              {
                this.state.countries.map(country =>
                    <Country country={country.Country} />)
              }
            </div>
            )}
        </div>
    );
  }
  ...
  // FetchData component 


  // Country component
  const Countries = ({ country }) => (
    <h1>{country}</h1>
  );
  // Country component