據我了解，如果我使用下面的代碼來檢索我在 Firestore 中的內容，它應該是一個陣列。我試過了
data.forEach((doc) => {
console.log(doc.id, " => ", doc.data());
});
來自 google firestore 的標準示例代碼。我發現控制臺日志中的物件是我需要從資料庫中獲取的陣列。
現在，這是我的代碼
import React, { useEffect, useState } from 'react';
import { getDocs, collection } from 'firebase/firestore';
import { db } from '../firebase-config';
const Home = () => {
const [postList, setPostList] = useState([]);
const postsCollectionRef = collection(db, "data");
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
data.forEach((doc) => {
setPostList({ ...doc.data() });
});
};
getPosts();
console.log(postList);
}, []);
return (
<div>{postList[0].Example}</div>
);
};
export default Home;
為什么它回傳一個空陣列？
uj5u.com熱心網友回復：
你打電話時
setPostList({ ...doc.data() });
它將覆寫舊狀態，因此您需要做的是從 Firestore 資料創建一個陣列，然后將整個陣列設定為如下所示的狀態
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
let postListArray = []
data.forEach((doc) => {
const post = { ...doc.data() }
postListArray.push(post)
});
setPostList(postListArray)
};
getPosts();
console.log(postList);
}, []);
uj5u.com熱心網友回復：
您可以使用map()with snapshot.docs(array of DocumentSnapshots)，如下所示：
const snapshot = await getDocs(postsCollectionRef);
const data = snapshot.docs.map((doc) => ({ id: doc.id, ...d.data() }))
setPostList(data);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/498220.html