我正在嘗試從 Firestore 中檢索游戲名稱并顯示在頁面上的串列中。為此，我使用組件 GameList（顯示檢索到的名稱）和 Home（獲取檢索到的資料并將其傳遞給 GameList 組件）。
這是我的代碼： Home.js ：-
import { useState, useEffect } from 'react';
import { personalDatabaseFirestore } from '../firebase/personalConfig';
import GameList from './GameList';
import './Home.css'
export default function Home(){
const [data, setData] = useState(null);
useEffect(()=>{
const ref = personalDatabaseFirestore.collection('Games');
let results = []
const unsub = ref.onSnapshot((snapshot)=>{
snapshot.docs.forEach((doc) => {
results.push({...doc.data(), id: doc.id});
})
},(error)=>{
console.log(error);
})
setData(results);
return ()=>unsub();
},[]);
console.log(data);
return (
<div className='mainpage-container'>
{data && <GameList games={data}/>}
</div>
);
}
游戲串列.js：-
export default function GameList({games}){
console.log('game list recieved\n', games);
return (
<ul>
{
games.map((doc)=>{
return (<li key={doc.id}>{doc.name}</li>);
})
}
</ul>
)
}
控制臺螢屏截圖顯示我能夠從 firestore 成功檢索資料，并且也能夠將其傳遞給 GameList 組件。但是在退出 gameList 組件中的資訊后，它并沒有呈現它應該回傳的串列。
uj5u.com熱心網友回復：
onSnapshot()異步回傳資料，因此您應該在setData其中使用。這也將確保以后收到的任何資料更新也被渲染。嘗試重構代碼，如下所示：
useEffect(() => {
const ref = personalDatabaseFirestore.collection('Games');
const unsub = ref.onSnapshot((snapshot) => {
const results = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
setData(results);
})
return () => unsub();
}, []);
如果您只需要獲取一次資料，那么我建議您使用get()而不是onSnapshot：
useEffect(() => {
const ref = personalDatabaseFirestore.collection('Games');
const fetchData = async () => {
const snapshot = await ref.get();
const results = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setData(results);
}
fetchData();
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/492815.html
上一篇：如何顯示串列視圖的總專案？
下一篇：無法匯入包