React Native API Fetch 没有完全发生.映射时引发错误

Question

我在运行应用程序时收到以下错误。我不知道这是什么问题。您能否帮助解决错误。早些时候，该应用程序运行平稳，但由于频繁运行，该应用程序完全停止工作。请请帮忙。 错误是：

设备： (78：22) 类型错误： 类型错误： 未定义不是函数(靠近"...文章.地图...') 此错误位于： 在文件中 在 T 在RCTView 在RCTView 在RCTView 在 F 在RCTView 在 F 在 C 语言中 在 T 在 n 中 在RCTView 在 n 中 在RCTView 在 F 在 S 中 在 T 在 n 中 在RCTView 在 T 在 T 在 L 在 s 在 R 中 在应用程序中 在RCTView 在RCTView 在 n 中 在 n 中 在 v 中 在RCTView 在RCTView 在 C 语言中 此错误位于： 在 R 中 在应用程序中 在RCTView 在RCTView 在 n 中 在 n 中 在 v 中 在RCTView 在RCTView 在 C 语言中

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, ScrollView, Button} from 'react-native';
import {Header, Icon} from 'react-native-elements';
import { Constants } from 'expo';
import Contents from './Contents';

import {
createStackNavigator,
createNavigatorContainer 
} from "react-navigation";
const API = 'https://sheetsu.com/apis/v1.0su/d25403ba73f5';
export default class Files extends React.Component {
constructor(props) {
super(props);
this.state = {
articles: []
};
}
componentDidMount() {
fetch(API)
.then(response => response.json())
.then(data => this.setState({ articles: data }));
}

static navigationOptions = {
title: 'FILES',
style:{display:'flex',
flexDirection:'row',
backgroundColor:"#FFD700",
flex:1}
};
render() {
const { articles } = this.state;
return (
<View style={styles.container2}>
<View style={styles.innerview2}>
{articles.map(articles =>
<ScrollView>

<TouchableOpacity key={articles.ID} 
style={styles.scrollView2}
onPress={() =>
this.props.navigation.navigate('Contents', {

id:articles.ID, 
date:articles.Date, 
title:articles.Title, 
content: articles.Content, 
category: articles.Category,
})}
>
<Text>{articles.Title}</Text>
</TouchableOpacity>
</ScrollView>
)}

</View>
<Button title="Refresh"/>
</View>
);

}
}
const styles = StyleSheet.create({
container2: {
flex:1,
display:'flex',
flexDirection:'column'
},
scrollView2:{
display:'flex',
flexDirection:'column',
backgroundColor:'#DDA8F4'
},
innerview2:{
flex: 1,
padding: 30,
display:'flex',
flexDirection:'column'
}
});

Answer 1

您需要涵盖不成功的响应。

如果您尝试记录您的文章

const { articles } = this.state;
console.log(this.state);

您可以看到以下错误

articles:{error:"Not such route /apis/v1.0bu/46ea903f642a"}

然后，您进一步记录响应：

fetch(API)
.then(response => { console.log(response); return response.json() })

这会产生

{
type:"default",
status:404,
ok:false,
headers:{…},
url:"https://sheetsu.com/apis/v1.0bu/46ea903f642a",
_bodyInit:"{"error":"Not such route /apis/v1.0bu/46ea903f642a"}",
_bodyText:"{"error":"Not such route /apis/v1.0bu/46ea903f642a"}"
}

如您所见，API 以 404 响应。您需要涵盖该情况，并仅在成功响应时填充articles状态。