如何获取 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 ，所以您可能不需要它。