javascript - Invariant Violation 试图获取超出范围索引 NaN 的帧（React Native） - 在 React Native 中获取数据的 FlatList

Question

我试图在React Native中将数组显示为FlatList ，但它一直给我以下错误：“不变违规：试图获取超出范围索引 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);

是

[“AJ Arberry”、“Abdul Majid Daryabadi”、“Abdullah Yusuf Ali”、“Abul Ala Maududi”、“Ahmed Ali”、“Ahmed Raza Khan”、“Ali Quli Qarai”、“英文音译”、“Hasan al- Fatih Qaribullah 和 Ahmad Darwish”、“Mohammad Habib Shakir”、“Mohammed Marmaduke William Pickthall”、“Muhammad Sarwar”、“Muhammad Taqi-ud-Din al-Hilali 和 Muhammad Muhsin Khan”、“Saheeh International”、“Talal Itani” ，“瓦希杜丁汗”]

标签： javascriptarraysreact-nativenanreact-native-flatlist

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

希望这可以帮助！