如何获取 Firebase Json api，我得到了响应，我可以解决它，但是 FlatList 的问题

Question

I want to fetch a API which is a Firebase JSON response

Here is the URL: https://learn-efc13-default-rtdb.firebaseio.com/products.json

This is my Code :

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

Here is my FlatList :

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

My problem is here I got the response, but I can not display it in the Text component .

Answer 1

I've had a look at your JSON endpoint and I can't see a property called products . It also looks like the data returned from the endpoint is an object. FlatList expects an array to be passed into the data prop (see example here https://reactnative.dev/docs/flatlist ).

I'm going to assume that this is why the FlatList component isn't returning anything.

So to correct this, you need to make sure products is present in the response from your API and you need to make sure that the data that you are passing into data prop for <FlatList /> is an array.

On a side note, I noticed that you were using async within the callback of the promise from axios.get() but it doesn't look like you are using await within the function so you probably don't need it.