![](/img/trans.png)
[英]Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'data.date')
[英][Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.state.result.map')]
[未处理的 promise 拒绝:TypeError:未定义不是 object(评估 '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'
}
});
您的 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>
);
}
由于您试图通过一个不存在的表来 go ,因此该错误已被捕获。
我正在做一个类似的项目。 猜猜这应该足够了
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>
)
猜猜这应该足够了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.