如何获取 Firebase Json api，我得到了响应，我可以控制台记录它，但是 FlatList 的问题答案

【问题标题】：How to fetch Firebase Json api, I got response and i can consol log it, But the problem with FlatList如何获取 Firebase Json api，我得到了响应，我可以控制台记录它，但是 FlatList 的问题
【发布时间】：2021-02-24 18:51:33
【问题描述】：

我想获取一个 API，它是 Firebase JSON 响应

这是网址：https://learn-efc13-default-rtdb.firebaseio.com/products.json

这是我的代码：

  const [data, setData] = useState([]);

  useEffect(() => {
    Get();
  }, []);

  function Get() {
    axios
      .get("https://learn-efc13-default-rtdb.firebaseio.com/products.json")
      .then(async function (response) {
        setData(response.data);
        console.log(response.data);
      })
      .catch((err) => console.error(err));
  }

这是我的平面列表：

     <FlatList
        data={data.products}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Text>{item.age}{item.name}</Text>}
      />

我的问题在这里我得到了响应，但我无法在文本组件中显示它。

【问题讨论】：

标签： javascript reactjs react-native axios react-native-flatlist

【解决方案1】：

我查看了您的 JSON 端点，但看不到名为 products 的属性。从端点返回的数据看起来也是一个对象。 FlatList 期望将一个数组传递给 data 属性（参见此处的示例 https://reactnative.dev/docs/flatlist）。

我假设这就是 FlatList 组件没有返回任何内容的原因。

因此，要更正此问题，您需要确保 API 的响应中存在 products，并且您需要确保传递给 <FlatList /> 的 data prop 的数据是一个数组。

顺便说一句，我注意到您在来自axios.get() 的承诺回调中使用了async，但看起来您并没有在函数中使用await，所以您可能不需要它。

【讨论】：