Question

运行我的应用程序时出现以下错误。我不知道这是什么问题。您能帮忙解决该错误吗？之前，该应用运行平稳，但是频繁运行后，该应用完全停止运行。请请帮助。错误是：

设备：（78:22）TypeError：TypeError：undefined不是函数（在'... articles.map ...'附近）该错误位于：在文件中在t 在RCTView中在RCTView中在RCTView中在f 在RCTView中在f 在C 在t 旅店在RCTView中旅店在RCTView中在f 在S中在t 旅店在RCTView中在t 在t 在我在s 在r 在应用程式中在RCTView中在RCTView中旅店旅店在v 在RCTView中在RCTView中在C 该错误位于：在r 在应用程式中在RCTView中在RCTView中旅店旅店在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状态。

React Native API Fetch并未完全发生。映射时抛出错误

1 个答案: