React native - 不变违规 - 试图获取超出范围索引的框架

Question

我已经尝试在其他帖子和论坛中搜索此错误的解决方案。然而，要么没有人解决这些问题，要么这些问题并没有像我所做的那样真正做同样的事情。我收到一条错误消息：“不变量违规 - 试图获取超出范围索引的框架”。当我尝试将数据从 poke api 输入到 flatlist 时，就会发生这种情况。请看下面的代码。

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: []
        }
    }

    componentDidMount() {
        fetch("https://pokeapi.co/api/v2/pokemon/")
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response
                })
                console.log(response)
            })
    }


    render() {
        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <FlatList data={this.state.dataSource} renderItem={({item})=> {
                    return(
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    )
                }}/>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}

export default Home;

Answer 1

你做错的是你发送this.state.datasource是你的数据属性，你需要发送this.state.dataSource.results

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator } from "react-native";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: []
        }
    }

    componentDidMount() {
        fetch("https://pokeapi.co/api/v2/pokemon/")
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response
                })
                console.log(response)
            })
    }


    render() {
        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={{marginTop:100}}>
                <View>{showIndicator}</View>
                <FlatList data={this.state.dataSource.results}
                 renderItem={({item})=> {
                    console.log("item is item",item);
                    return(
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    )
                }}/>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}

export default Home;

希望对您有所帮助！

React native - 不变违规 - 试图获取超出范围索引的框架

React native - Invariant violation-tried to get frame for out of range index

javascript

database

reactjs

react-native

react-native-flatlist