不变违规试图获取超出范围的索引 NaN 的框架（React Native）-在 React Native 中使用 Fetch 数据的 FlatList

Question

我试图在 React Native 中将数组显示为 FlatList，但它一直给我以下错误： "Invariant Violation: Tried to get frame for out of range index NaN"

我的代码：

async function getNarrators() {
  const response = await fetch(
    'https://islamcompanion.pakjiddat.pk/api/get_narrators',
    {
      method: 'post',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'language=english',
    },
  );
  const json = await response.json();
  var peopleArray = Object.values(json);
  console.log(peopleArray);
  return peopleArray;
}

const ListItem = ({title}) => (
  <View>
    <Text>{title}</Text>
  </View>
);

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text></Text>

      <FlatList
        data={getNarrators()}
        keyExtractor={(item) => item}
        renderItem={({item}) => <ListItem title={item} />}
      />

      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <MyButton />
    </View>
  );
}

来自

的输出

console.log(peopleArray);

是

["A. J. Arberry", "Abdul Majid Daryabadi", "Abdullah Yusuf Ali", "Abul Ala Maududi", "Ahmed Ali", "Ahmed Raza Khan", "Ali Quli Qarai", "English Transliteration", "Hasan al-Fatih Qaribullah and Ahmad Darwish", "Mohammad Habib Shakir", "Mohammed Marmaduke William Pickthall", "Muhammad Sarwar", "Muhammad Taqi-ud-Din al-Hilali and Muhammad Muhsin Khan", "Saheeh International", "Talal Itani", "Wahiduddin Khan"]

Answer 1

您需要在您的代码中使用 useEffect 和 useState，并且需要像这样获取您的 API，我对您的代码做了一些更改，请尝试这样做：

import {View, Text, FlatList, Button} from 'react-native';
import React, { useEffect, useState } from 'react';

function HomeScreen({navigation}) {
    const [data, setData] = useState([]);
    useEffect(() => {
      const fetchData = async () => {
        const response = await fetch(
            'https://islamcompanion.pakjiddat.pk/api/get_narrators',
            {
              method: 'post',
              headers: {
                Accept: 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
              },
              body: 'language=english',
            },
          );
          const json = await response.json();
          var peopleArray = Object.values(json);
          console.log(peopleArray);
        setData(peopleArray);
      };
      fetchData();
    }, []);
    const ListItem = ({title}) => (
        <View>
          <Text>{title}</Text>
        </View>
      );
    return   <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <Text></Text>

    <FlatList
      data={data}
      keyExtractor={(item) => item}
      renderItem={({item}) => {
          console.log("item is",item);
          return(
            <ListItem title={item} />
          )

      }
     }
    />

    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
  };

希望对您有所帮助！

不变违规试图获取超出范围的索引 NaN 的框架（React Native）-在 React Native 中使用 Fetch 数据的 FlatList

Invariant Violation Tried to get frame for out of range index NaN (React Native) - FlatList with Fetch data in React Native

javascript

arrays

nan

react-native

react-native-flatlist