Javascript [未处理的承诺拒绝：TypeError:undefined不是对象（正在评估'；this.state.result.map'；）]

[未处理的承诺拒绝：TypeError:undefined不是对象（计算'this.state.result.map'）]。 每当我试图从api获取数据时，就会出现此错误。在下面的代码中，我使用了val.Global，其中Global是包含所有数据的标题。有人能说出我的代码有什么问题吗

import React from 'react';
import {View, Text, ActivityIndicator, StyleSheet, FlatList} from 'react-native';



export class mainScreen extends React.Component{
  
    constructor(props){
        super(props);
        this.state = {
            isloading: true,
            result: []
        }
    }
    componentDidMount(){
     return fetch('https://api.covid19api.com/summary')
      .then((response) => response.json())
      .then((responseJson) => {
          this.setState({
              isloading: false,
              result: responseJson.covid
          })
      })
    }
   
    render(){
        if(this.state.isloading){
            return (
                <View style={styles.container}>
                <ActivityIndicator/>
                </View>
            )
        }else{
        let covid = this.state.result.map((val, key) => {
        return <View key={key} style={styles.item}><Text>{val.Global}</Text></View>
        });
       return(
        <View style={styles.container}>
        {covid}
       </View>
        );
    }
  }
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    item: {
        flex: 1,
        alignSelf: 'stretch',
        margin: 10,
        alignItems: 'center',
        justifyContent: 'center'
    }
  });

从“React”导入React；
从“react native”导入{View，Text，ActivityIndicator，StyleSheet，FlatList}；
导出类主屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
结果：[]
}
}
componentDidMount（）{
返回获取（'https://api.covid19api.com/summary')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
结果：responseJson.covid
})
})
}
render（）{
if（此.state.isloading）{
返回(
)
}否则{
让covid=this.state.result.map（（val，key）=>{
返回{val.Global}
});
返回(
{新冠病毒}
);
}
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
项目：{
弹性：1，
自我定位：“拉伸”，
差额：10，
对齐项目：“居中”，
为内容辩护：“中心”
}
});

您的API调用将返回以下内容：

{
    "Global": {
        "NewConfirmed": 214569,
        "TotalConfirmed": 14506757,
        "NewDeaths": 4029,
        "TotalDeaths": 606157,
        "NewRecovered": 104134,
        "TotalRecovered": 8149310
    },
    "Countries": [
        {
                "Country": "Afghanistan",
                "CountryCode": "AF",
                "Slug": "afghanistan",
                "NewConfirmed": 174,
                "TotalConfirmed": 35475,
                "NewDeaths": 17,
                "TotalDeaths": 1181,
                "NewRecovered": 361,
                "TotalRecovered": 23634,
                "Date": "2020-07-20T13:49:18Z",
                "Premium": {}
            },
...

在您的组件中，您试图检索不存在的“covid”字段。。。您需要像这样保存API数据：

this.setState({
    isloading: false,
    result: responseJson
})

并通过以下方式更改渲染：

render() {
    const { loading, result } = this.state; 

    if (loading) {
        return (
            <View style={styles.container}>
                <ActivityIndicator/>
            </View>
        );
    }

    //If you want to show total recovered for global
    return (<View key={key} style={styles.item}><Text>{val.Global.TotalRecovered}</Text></View>);

   //If you want to show global recovered for each country
   const covid = result.Countries.map(country => (<View key={key} style={styles.item}><Text>{country.TotalRecovered}</Text></View>));

   return (
        <View style={styles.container}>
            {covid}
        </View>
   );
}

render（）{
const{loading，result}=this.state；
如果（装载）{
返回(
);
}
//如果要显示全局恢复的总数
返回（{val.Global.TotalRecovered}）；
//如果要显示每个国家的全球恢复情况
const-covid=result.Countries.map（country=>（{country.TotalRecovered}））；
返回(
{新冠病毒}
);
}

---

由于您试图浏览一个不存在的表，因此出现了错误。

我正在处理一个类似的项目。我想这就足够了

const covid = result.Countries.map((country, key) => {
            return (<View key={key} style={styles.item}><Text>{country.TotalRecovered}</Text></View>);
        })

    return (
                <View style={styles.container}>{name}</View>
            )

const-covid=result.Countries.map（（国家，关键）=>{
返回（{country.TotalRecovered}）；
})
返回(
{name}
)

---

我想这就足够了

您提供的API返回的数据不包含属性covid，因此，

responseJson.covid

未定义。@elvira.genkel您能告诉我如何更改代码吗？TypeError:undefined不是一个函数（靠近“…this.state.result.map…”）。明白了吗error@PiyushAwasthi我更新了我的答案，如前所述，您正在尝试遍历一个不存在的数组，

Countries

字段是一个可以使用

map（）

函数遍历的数组，非

Global

如果要同时显示每个国家的国家代码，请告诉我该怎么做？我应该使用循环还是什么？@PiyushAwasthi您必须使用

map（）

函数在结果的国家字段上循环如下：

const covid=result.Countries.map（country=>（{country.CountryCode}））但这样做会产生错误：TypeError:undefined不是对象（评估'result.Countries.map'）]