Question

[未处理的承诺拒绝：TypeError：未定义不是一个对象（评估'this.state.result.map'）]

2020-07-20

7380

javascript android reactjs api react-native

[未处理的承诺拒绝：TypeError：未定义不是对象（评估“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>
   );
}

由于您尝试浏览不存在的表，因此错误被捕获。

Answer 2

我曾经做过类似的项目。我想这应该足够了

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>
            )

我想这应该足够了！