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

Question

我尝试搜索其他帖子和论坛来解决此错误。然而，要么没有人解决这些问题，要么这些问题并没有真正做与我正在做的事情相同的事情。我收到一条错误消息“不变违规 - 试图获取超出范围索引的框架”。当我尝试从 poke api 将数据输入到平面列表时，就会发生这种情况。请参阅下面的代码。

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;

希望这有帮助!