Error: Invariant violation: tried to get frame for out of range index NaN in react-native-ios and fetch-api

Question

enter image description here尝试使用 fetch-api 在 react-native 中显示博客内容。我对语法很困惑，因为它随着我上网的相关示例变得越来越复杂。 API 是从 PHP-PDO/MySQL 本地生成的，我在 POSTMAN 上测试了 url。但是，每次尝试使用 fetch-api 和 console.log() 显示内容时，我都会收到错误消息。

我试图在网上查看类似的问题，但由于问题与我的不同，因此似乎模棱两可。有一段时间我想是因为我在渲染中使用了 map()，所以我改用了 FlatList。

错误：

This error is located at:
    in VirtualizedList (at FlatList.js:625)
    in FlatList (at Category.js:32)
    in RCTView (at View.js:45)
    in View (at Category.js:31)
    in Category (at App.js:10)
    in RCTView (at View.js:45)
    in View (at App.js:9)
    in App (at renderApplication.js:34)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:33)

import React, { Component } from 'react';
import 
{ Text, 
  View,
  FlatList,
  StyleSheet
} from 'react-native';


export default class Category extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: []
        }
    }
        componentWillMount() {
           const that = this;
            fetchData = async () => {
            const response = await  fetch("http://localhost/rest_api_myblog/api/post/read.php");
            const json = await response.json();
            that.setState({ data: json});
            console.log(json);
          }

          }


          render() {
             return(
               <View style={styles.container}>
                 <FlatList 
                 data={this.state.data}
                 keyExtractor={(x, i) => i}
                 renderItem={({ item }) =>
                 <Text>
                   {`${item.author} ${item.category_name}`}
                 </Text>}
                 />
               </View>
             );

          }
}

我要显示post内容

Answer 1

我已经使用 axios 调整了您的代码。尝试查看您是否使用 axios，但您需要使用 npm i axios --save 或 yarn add axios 添加 axios 到项目，然后您可以导入它。所做的事情将为您提供有关如何处理结果的线索。

import React, { Component } from 'react';
import {
    ScrollView, 
    StyleSheet,
    View, 
    Text
} from 'react-native';
import axios from 'axios';

export default class Post extends Component{
    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }


    componentDidMount(){
        axios.get(`http://localhost/rest_api_myblog/api/post/read.php`) //I used backtick 
        //.then(json => console.log(json.data.data[0].id)) //try to traverse to your json element by doing console.log to ensure you have a feedback
        .then(json => json.data.data.map(mydata =>(
            {
                author: `${mydata.author} ${mydata.id}`,
                id: mydata.registered 
            }
        )))
        //.then(newData => console.log(newData)) //also I did a console.log to check if the newData is working. 
        .then(newData => this.setState({posts: newData}))
        .catch(error => alert(error))

        }
    render(){
        return (
        <ScrollView>
             {   
                 this.state.posts.map((post, index) =>(
                     <Text key={index}>
                         {post.author}
                     </Text>
                 ))
             }
        </ScrollView>);
    }
}

希望对您有所帮助

Answer 2

我遇到了同样的错误，因为我试图执行对象而不是数组。确保您使用的是 FlatList 数组

Error: Invariant violation: tried to get frame for out of range index NaN in react-native-ios and fetch-api

Error: Invariant violation: tried to get frame for out of range index NaN in react-native-ios and fetch-api

ios

reactjs

react-native

fetch-api