如何獲取 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>}
      />

我的問題在這里我得到了響應，但我無法在 Text 組件中顯示它。

Answer 1

我查看了您的 JSON 端點，但看不到名為products的屬性。 看起來從端點返回的數據也是 object。 FlatList期望將一個數組傳遞到data屬性中（參見此處的示例https://reactnative.dev/docs/flatlist ）。

我將假設這就是 FlatList 組件不返回任何內容的原因。

因此，要糾正此問題，您需要確保 API 的響應中存在products ，並且您需要確保傳遞給<FlatList />的 data prop 的數據是一個數組。

在旁注中，我注意到您在axios.get()的 promise 的回調中使用了async ，但看起來您沒有在 ZC1C425268E68385D1AB5074C17A9 中使用await ，所以您可能不需要它。