错误:不变冲突:尝试为react-native-ios和fetch- NaN中超出范围的索引获取帧

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>
             );

          }
}

我想要显示帖子内容

Answer 1

我已经使用axios调整了你的代码。试着看看您是否可以使用axios，但是您需要使用npm i axios将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>);
    }
}

我希望这能帮到你

Answer 2

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