javascript - [未处理的 promise 拒绝 : TypeError: undefined is not an object (evaluating 'this.state.result.map' )]

Question

[未处理的 promise 拒绝:类型错误:未定义不是对象(评估'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'
    }
  });

Answer 1

您的 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>
   );
}

错误被捕获，因为您正试图通过一个不存在的表。