如何在反应本机博览会中从 Firestore 获取数据？

Question

I have a database in firestore. I want to retrieve that data from firestote I don't know what is the problem, I am getting an empty array as result.

 import React, { useState, useEffect } from "react"; import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; import { globalStyles } from "../styles/global"; import { FontAwesome } from "@expo/vector-icons"; import ItemCat from "./menu/itemCat"; import AsyncStorage from "@react-native-async-storage/async-storage"; import firebase from "../firebase"; const category = ["Starters", "Biriyanis", "Breads", "Icecreams"]; export default function MenuBody({ navigation }) { const [toggle, setToggle] = useState("toggle-off"); const [fdata, setFdata] = useState([]); const [isLoad, setIsLoading] = useState(false); const db = firebase.firestore(); const docref = db.collection("menu"); useEffect(() => { const cat = []; console.log(docref); const fetchCat = async () => { await docref .get() .then((querySelector) => { querySelector.forEach((item) => { const data = item; cat.push(data); console.log(data); }); }) .catch((err) => { console.log(err); }); setFdata(cat); console.log(fdata); }; fetchCat(); //CALLING FUNCTION }, []);

console.lof(fdata) returns an empty array. Please help me.

Answer 1

Logging cat directly instead setting it in state first should do the trick. Try refactoring the code as shown below:

const colref = db.collection("menu");

useEffect(() => {
  console.log(colref);
  
  const fetchCat = async () => {
    const querySelector = await colref.get()
    const cats = querySelector.docs.map((item) => item.data()) 
    
    setFdata(cats);
    console.log(cats);
  };

  fetchCat(); 
}, []);

I renamed docRef to colRef since it's a CollectionReference .