如何在 useEffect 挂钩中映射来自 firestore 数据库的数据

Question

我正在尝试从 firestore 数据库中获取一些数据并将其保存到数组中进行反应。这是我的代码。

    const readDocuments = async () => {          
        const allData = await getDocs(collectionRef);
        //console.log(allData);
        // allData.forEach((doc) => {
        //     console.log(doc.id, " => ", doc.data());
        // });
        setData(allData.docs.map((doc) => ({
            ...doc.data(), id: doc.id
        })))
        console.log(data);
        //return allData;
    };

当我检查控制台时，这就是我得到的。

不太确定我做错了什么。我在教程中看到了几乎相同的方法。如果我取消注释函数内的 foreach 循环，它会正确输出数据，所以我认为这不是实际检索信息的问题。

编辑：上面的函数嵌套在 useEffect 挂钩中。

Answer 1

如果您查看 documentation，他们会向您展示具体操作方法。

import { collection, query, where, getDocs } from "firebase/firestore";

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Answer 2

import { useEffect, useState } from "react";
import { collection, getDocs } from "firebase/firestore";
import { db } from "../firebase/config";

const useGetDocs = (collectionName) => {
    const [documents, setDocuments] = useState([]);

    //Firebase Collection Reference
    const postCollectionRef = collection(db, collectionName);

    useEffect(() => {
        const getDocuments = async () => {
            const data = await getDocs(postCollectionRef);
            setDocuments(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
        };

        getDocuments();
    }, []);

    return { documents };
}
 
export default useGetDocs;

这是我使用的完整文件，现在可以使用了。不一定确定之前出了什么问题，但我所做的主要更改是使用 'use' 关键字将其创建为自定义挂钩，这可能与它有关。我无论如何都不是专家，仍然可能做错事，但希望这对遇到类似问题的人有所帮助。

干杯！

如何在 useEffect 挂钩中映射来自 firestore 数据库的数据

How can I map data from a firestore database in a useEffect hook

reactjs

firebase

google-cloud-firestore

async-await

use-effect