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

Question

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

这是 URL : 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:

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

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

Answer 1

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

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

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

附带一提，我注意到您在 axios.get() 的承诺回调中使用了 async，但看起来您并没有在功能，所以你可能不需要它。

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

How to fetch Firebase Json api, I got response and i can consol log it, But the problem with FlatList

javascript

reactjs

react-native

axios

react-native-flatlist