从 API 获取数据并在 React Native 中使用 Flatlist 时不显示数据

Question

这是我的代码 Iam 使用 API 并从中获取数据...如果 iam console 这意味着它工作正常但它 does'nt 显示它同时使用 FlatList

从 'react-native' 导入 { 查看，Text,FlatList,Button,TouchableOpacity}；从 'react';

导入 React，{useState,useEffect}

const LyricsGet = () => {

const url = "https://api.lyrics.ovh/v1/Sia/unstoppable";

 const[lyric,setLyric]=useState([]);

Fetching the data using useEffect

useEffect(() => {

    console.log("inside the useeffect");

    fetch(url)
      .then(response => response.json())
      .then(results => {
        console.log(results);
        setLyric(results);
      })
      .catch(err => {
        setError(err);
      });
   
      console.log("inside the useeffect 22222");

  }, []);
return (
    <View>
      <FlatList
            data={lyric}
            renderItem={({ item }) => <Text key={item._id}>{item.lyrics}</Text>}
            keyExtractor={item => item.id}
          />
</View>
  );
}

这里是我的主机

对象{ “歌词”：“我会微笑，我知道怎样才能愚弄这个小镇我会这样做，直到太阳下山，直到整个夜晚哦耶哦，是的，我会告诉你你想听什么当我流泪时，请戴上我的太阳镜时机不对耶耶耶

我穿上盔甲，让你看看我有多强

我穿上我的盔甲，我会告诉你我是

我势不可挡

我是没有刹车的保时捷

我无敌

是的，我每场比赛都赢

我好厉害

我玩游戏不需要电池

我很有信心

是的，我今天势不可挡

今天势不可挡，今天势不可挡

今天势不可挡，我今天势不可挡

崩溃，只有我一个人哭出来

你永远看不到隐藏的东西

隐藏在深处，是的，是的

我知道，我听说是为了表达你的感受

是增进友谊的唯一途径

但是我现在太害怕了，是的，是的

我穿上盔甲，让你看看我有多强

我穿上我的盔甲，我会告诉你我是

我势不可挡

我是没有刹车的保时捷

我无敌

是的，我每场比赛都赢

我好厉害

我玩游戏不需要电池

我很有信心

是的，我今天势不可挡

今天势不可挡，今天势不可挡

今天势不可挡，我今天势不可挡

今天势不可挡，今天势不可挡

今天势不可挡，我今天势不可挡

我穿上盔甲，让你看看我有多强

我穿上我的盔甲，我会告诉你我是

我势不可挡

我是没有刹车的保时捷

我无敌

是的，我每场比赛都赢

我好厉害

我玩游戏不需要电池

我很有信心

是的，我今天势不可挡

今天势不可挡，今天势不可挡

今天势不可挡，我今天势不可挡

今天势不可挡，今天势不可挡

今天势不可挡，我今天势不可挡", }

Answer 1

您的结果变量是一个对象。

你可以在设置歌词的时候创建一个数组来达到你想要的效果：

setLyric([results]);

Answer 2

你从 useState lyric 获得的数据..是一个对象吧？ FlatList 需要一个数组。

从 API 获取数据并在 React Native 中使用 Flatlist 时不显示数据

Data's not displaying while fetching from API and using Flatlist in react native

reactjs

api

react-native-flatlist

react-flatlist