TypeError:undefined 不是对象,item 来自 API 的数组
2018-10-06
1060
export default class LaunchingScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: null,
refreshing: false
};
}
//When screen is pulled down this calls for fresh through the state its int
_onRefresh = () => {
this.setState({ refreshing: true });
this.componentDidMount().then(() => {
this.setState({ refreshing: false });
});
};
//Gets data from API
componentDidMount() {
return fetch("https://launchlibrary.net/1.4/launch?mode=verbose")
.then(response => response.json())
.then(responseJson => {
this.setState({
isLoading: false,
dataSource: responseJson.launches
});
})
.catch(error => {
console.log(error);
});
}
//Renders Screen
render() {
//Refresh if statement
if (this.state.isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
);
} else {
//Launches is what its called on later to display what is being said in launches
let launches = this.state.dataSource.map((item, key) => {
return (
<View key={key} style={styles.container}>
<View style={styles.subcontainer}>
<Text>{item.missions[0].name}</Text>
</View>
</View>
);
});
//Allows the screen to be scrollable w/ refresh control
return (
<View style={styles.Background}>
<ScrollView
contentContainerStyle={styles.contentContainer}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
>
{launches}
</ScrollView>
</View>
);
}
}
}
我遇到的问题是从启动库 API 获取数据(任务名称),该 API 位于数组中。我获取数据并将它们放入 item/key 中。当我通过 item.missions[0].name(missions[0] 是数组)调用任务名称时,我收到 TypeError:undefined 不是对象。有人告诉我必须检查任务是否未定义,但我不明白该如何解决。
3个回答
您尝试获取一个数组的索引 (0),假设您有一个数组并且它里面确实有值。
您可以像这样检查并确保:
<Text>
{Array.isArray(item.missions) && item.missions.length && item.missions[0].name}
</Text>
这将检查该值是否实际上是一个长度大于 0 的数组,以便您可以访问 0 索引。
Akrion
2018-10-06
访问数组之前执行此条件检查
<Text>{item.missions && item.missions[0].name}</Text>
Hemadri Dasari
2018-10-06
尝试关注
<Text>{item?.missions[0]?.name}</Text>
Dileepa Chandima
2018-10-06