Нарушение инварианта Попытка получить кадр для индекса вне диапазона NaN (React Native) - FlatList с данными Fetch в React Native

Question

Я пытаюсь отобразить массив как FlatList в React Native , но он продолжает выдавать мне следующую ошибку: "Нарушение инварианта: попытался получить кадр за пределами диапазона 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);

is

[" AJ Arberry "," Абдул Маджид Дарьябади " , "Абдулла Юсуф Али", "Абул Ала Маудуди", "Ахмед Али", "Ахмед Раза Хан", "Али Кули Караи", "Транслитерация английского языка sh", "Хасан аль-Фатих Карибулла и Ахмад Дарви sh "," Мухаммед Хабиб Шакир "," Мухаммед Мармадук Уильям Пиктхолл "," Мухаммед Сарвар "," Мухаммед Таки-уд-Дин аль-Хилали и Мухаммед Мухсин Хан "," Сахих Интернэшнл "," Талал Итани "," Вахидуддин Хан " ]

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

Надеюсь, это поможет!