我希望 useEffect 獲取和呈現rooms資料。并在添加新房間時重新渲染資料rooms
使用 useEffect 和空依賴項獲取資料和顯示資料的代碼。
const [rooms, setRooms] = useState([]);
const getRoomsData = async () => {
const querySnapshot = await getDocs(collection(db, "rooms"));
const data = querySnapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}));
setRooms(data);
};
useEffect(() => {
getRoomsData();
console.log("rerendered");
}, []);
使用此代碼，在我向rooms. 我需要手動重繪 頁面以查看呈現的新資料。添加新的“房間”后，我應該怎么做才能使其重新呈現rooms？
添加房間的代碼：
const roomName = prompt("please enter name for chat room");
if (roomName) {
addDoc(collection(db, "rooms"), {
name: roomName,
});
}
};
我嘗試向 useEffect 依賴項添加房間，這有我想要的結果（無需重繪 ），但這只是因為它無限渲染，這很糟糕。正確的做法是什么？
uj5u.com熱心網友回復：
您正在獲得無限的重新渲染，因為里面的函式useEffect正在更新rooms效果的依賴陣列中的狀態。這將始終導致無限重新渲染。
逐字回答您的問題：“如何僅在資料更改時才重新渲染？”
由于rooms和data設定為相同，因此您可以保持原樣，useEffect但隨后創建另一個useEffect僅在組件安裝以呼叫getRoomsData().
const [rooms, setRooms] = useState([]);
const getRoomsData = async () => {
const querySnapshot = await getDocs(collection(db, "rooms"));
const data = querySnapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}));
setRooms(data);
};
useEffect(() = > {
getRoomsData();
}, [])
useEffect(() => {
console.log("rerendered");
}, [rooms]);
我認為解決您的問題的真正關鍵是知道何時呼叫getRoomsData()，因為根據這一點，您將更改useEffect依賴項陣列以適應該需要。
uj5u.com熱心網友回復：
使用 useEffect 獲取資料時，它期望進行同步呼叫。從 Firestore 請求資料將是異步的，因此為了解決這個問題，我們可以添加一個函式來封裝名為 getRoomsData 的 firestore 呼叫，如下所示：
const [rooms, setRooms] = useState([]);
useEffect(() = > {
const getRoomsData = async () => {
const querySnapshot = await getDocs(collection(db, "rooms"));
const data = querySnapshot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}));
setRooms(data);
};
getRoomsData();
}, [])轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334083.html
標籤：javascript 反应 使用效果 使用状态