Ошибка: нарушение инварианта: попытался получить фрейм для индекса NaN вне диапазона в реакции-нативном-ios и fetch-api

Question

введите описание изображения здесь Попытка отобразить содержимое блога в реагирующем с использованием fetch-api.Я сильно путаюсь с синтаксисом, так как он становится сложным с соответствующими примерами, которые я получаю в Интернете.API был сгенерирован локально из PHP-PDO / MySQL, и у меня есть URL, проверенный на POSTMAN.Тем не менее, я получаю сообщение об ошибке каждый раз, когда я пытаюсь отобразить содержимое с помощью 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>
             );

          }
}

Я хочу отобразить содержимое сообщения

Answer 1

У меня та же ошибка, потому что я пытался выполнить объект, а не массив.убедитесь, что вы используете FlatList массив

Answer 2

Я скорректировал ваш код, используя axios.Попытайтесь выяснить, справляетесь ли вы с использованием axios, но вам нужно добавить axios в проект, используя npm i axios --save или yarn add 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>);
    }
}

Надеюсь, это поможет