使用 react js hook 在 firebase 實時資料庫上獲取資料時出錯。當我用地圖洗掉資料時，錯誤即將到來“未定義”，但我在控制臺日志上看到資料是成功的。
我認為錯誤是因為回圈代碼在獲取完成之前執行
這是獲取代碼
const [firebaseDb, setFirebaseDb] = useState(database);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const getData = async () =>{
try {
const dbRef = firebaseDb;
let snapshot = await get(child(dbRef, `menu`))
if (snapshot.exists()) {
console.log(snapshot.val());
setData(snapshot.val());
setLoading(false);
} else {
setData({});
setLoading(false);
console.log("No data available");
}
} catch(e){
setLoading(false)
console.log(e.message);
}
}
useEffect(() => {
setLoading(true);
getData()
}, []);
這是裁剪代碼
{
loading ? (
<Row><p>Loading ... !</p></Row>
) : (
<Row>
{
data.appetizer.map((apper, index) => {
return (
<Col key={index} lg='6' className="p-3">
<div className="menu-list p-3">
<h5>{apper.name}</h5>
<h4>{apper.price}k</h4>
<p className="mb-0">{apper.desc}</p>
</div>
</Col>
)
})
}
</Row>
)
}
uj5u.com熱心網友回復：
您的data變數最初是一個陣列，因此它沒有appetizer屬性。使用data.map(...)來代替。（嘗試setData使用陣列傳遞給）
當然渲染總是在獲取完成之前執行。您只需要typeof data.length > 0 在渲染映射之前檢查---- 或者只是將 的初始值設定loading為 true。
它應該是這樣的：
const [loading, setLoading] = useState(true);
或者
loading || data.length === 0 ? (
<Row><p>Loading ... !</p></Row>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380457.html
標籤：javascript 反应 火力基地 火力实时数据库