错误：违反不变：试图让框架在反应母语-IOS和获取的API超出范围的指数不同的NaN

Question

enter image description hereTrying显示在反应天然使用取-API一个博客内容。我的语法很多困惑，因为它变得复杂与相关的例子，我在上网。该API在本地从PHP-PDO / MySQL的产生，我有一个网址上邮差测试。不过，我收到错误每次我试图使用显示获取的API和执行console.log（）的内容。

我曾尝试类似的问题在网上查询，但它似乎模棱两可的问题是与我的不同。在我以为，因为我使用的地图（）在我的渲染，所以我改成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公司获得，但你需要添加爱可信使用NPM我爱可信--save或纱线加爱可信，那么你可以将其导入到项目。什么都做会给你如何去结果的线索。

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数组