在 React js 中解析 JSON

Question

我最近开始使用 react js 并尝试使用 react js 制作我的第一个演示网站，该网站从 https://covid19.mathdro.id 网站获取 json 数据。 对于 json 具有单一值的简单情况，例如确诊病例、死亡病例等，我正在拉动并且工作正常。但是，当我尝试提取国家数据时，我在映射数据数组时遇到了问题。 我的着陆页截图

import React, { Component } from 'react';

import Country from './Country'
import Cases from './Cases';

class Landing_Page extends Component{
render(){
    return(
        <>
        <Cases />
        <Country />
        </>
    );
}
}
export default Landing_Page;

这是我的国家组件

import React, { Component } from 'react';
import Axios from 'axios'
import 'antd/dist/antd.css'

class Country extends Component{
state=[
{
  country_name:"USA",
  country_code:"US"
},
]

componentDidMount(){
this.getCountries();
}
async getCountries(){
const res=await Axios.get('https://covid19.mathdro.id/api/countries');
console.log(res);
this.setState({
  country_name:res.data.countries.name,
  country_code:res.data.countries.code
});
}
render(){
return(
<div>
  {
    this.state.map(() => { 

    <li key={country_code} className={country_code}>{country_name}</li>
    })
  }
</div>
)
}
}
export default Country;

这里是 api 链接 https://covid19.mathdro.id/api/countries

{
"countries":
[
{"name":"Afghanistan","iso2":"AF","iso3":"AFG"},
{"name":"Albania","iso2":"AL","iso3":"ALB"},
{"name":"Algeria","iso2":"DZ","iso3":"DZA"},
{"name":"Andorra","iso2":"AD","iso3":"AND"},
{"name":"Angola","iso2":"AO","iso3":"AGO"},
{"name":"Antigua and Barbuda","iso2":"AG","iso3":"ATG"}, 
{"name":"Argentina","iso2":"AR","iso3":"ARG"},
{"name":"Armenia","iso2":"AM","iso3":"ARM"},
{"name":"Australia","iso2":"AU","iso3":"AUS"},
{"name":"Austria","iso2":"AT","iso3":"AUT"},
{"name":"Azerbaijan","iso2":"AZ","iso3":"AZE"},
{"name":"Bahamas","iso2":"BS","iso3":"BHS"},
{"name":"Bahrain","iso2":"BH","iso3":"BHR"},
{"name":"Bangladesh","iso2":"BD","iso3":"BGD"},
{"name":"Barbados","iso2":"BB","iso3":"BRB"},
{"name":"Belarus","iso2":"BY","iso3":"BLR"},
{"name":"Belgium","iso2":"BE","iso3":"BEL"},
{"name":"Belize","iso2":"BZ","iso3":"BLZ"},
{"name":"Benin","iso2":"BJ","iso3":"BEN"},
{"name":"Bhutan","iso2":"BT","iso3":"BTN"},
{"name":"Bolivia","iso2":"BO","iso3":"BOL"},
{"name":"Bosnia and Herzegovina","iso2":"BA","iso3":"BIH"}, 
{"name":"Brazil","iso2":"BR","iso3":"BRA"},
{"name":"Brunei","iso2":"BN","iso3":"BRN"},
{"name":"Bulgaria","iso2":"BG","iso3":"BGR"},
{"name":"Burkina Faso","iso2":"BF","iso3":"BFA"},
{"name":"Burma"},{"name":"Cabo Verde"},
{"name":"Cambodia","iso2":"KH","iso3":"KHM"},
{"name":"Cameroon","iso2":"CM","iso3":"CMR"},
{"name":"Canada","iso2":"CA","iso3":"CAN"},
{"name":"Central African Republic","iso2":"CF","iso3":"CAF"}, 
{"name":"Chad","iso2":"TD","iso3":"TCD"},
{"name":"Chile","iso2":"CL","iso3":"CHL"},
{"name":"China","iso2":"CN","iso3":"CHN"},
{"name":"Colombia","iso2":"CO","iso3":"COL"},
{"name":"Congo (Brazzaville)"},
{"name":"Congo (Kinshasa)"},
{"name":"Costa Rica","iso2":"CR","iso3":"CRI"},
{"name":"Cote d'Ivoire"},
{"name":"Croatia","iso2":"HR","iso3":"HRV"},
{"name":"Cuba","iso2":"CU","iso3":"CUB"},
{"name":"Cyprus","iso2":"CY","iso3":"CYP"},
{"name":"Czechia","iso2":"CZ","iso3":"CZE"},
{"name":"Denmark","iso2":"DK","iso3":"DNK"},
{"name":"Diamond Princess"},
{"name":"Djibouti","iso2":"DJ","iso3":"DJI"},
{"name":"Dominica","iso2":"DM","iso3":"DMA"},
{"name":"Dominican Republic","iso2":"DO","iso3":"DOM"}, 
{"name":"Ecuador","iso2":"EC","iso3":"ECU"},
{"name":"Egypt","iso2":"EG","iso3":"EGY"},
{"name":"El Salvador","iso2":"SV","iso3":"SLV"},
{"name":"Equatorial Guinea","iso2":"GQ","iso3":"GNQ"}, 
{"name":"Eritrea","iso2":"ER","iso3":"ERI"},

列表还在继续。

我非常感谢在 json 之上解析/映射的解决方案。在此先感谢

错误截图

这是我的更新代码和快照

Answer 1

变化：

{
    this.state.map((country) => { 
    <li key={country.country_code} className={country.country_code}>{countrycountry_name}</li>
    })
 }

收件人：

{
    this.state.map((country) => (<li key={country.country_code} className={country.country_code}>{country.country_name}</li>)
    )
 }

你应该在这里返回一些东西来渲染你的组件

Answer 2

  {
    this.state.map(() => { 

    <li key={country_code} className={country_code}>{country_name}</li>
    })
  }

您需要为要传递给 map 的函数定义参数。

正如Mozilla documentation for Array.map 所说：

语法

let new_array = arr.map(function callback( currentValue[, index[,
array]]) {

    // return element for new_array
}[, thisArg])

所以上面你想把函数改成这样：

  {
    this.state.map((country, optionalIndexArgument, optionalArrayArgument) => { 

    <li key={country.country_code} className={country.country_code}>{country.country_name}</li>
    })
  }