我的useEffect()函式正在從Firebase檢索資料，并且只在螢屏上渲染一個<TaskItem/>。
我提取資料并將其存盤在我的狀態中的temptasks中，然后使用map渲染，為每個專案顯示一個組件。
在我的后臺Firebase中有五個專案，使用控制臺日志我可以看到它們都被接收了，但為什么只有第一個專案被渲染。重新渲染頁面會顯示所有5個。
useEffect(() =>/span> {
if(userId!==''/span> && id !==userId)
setId（userId）。
if (id !== ''/span>) {
let counter = 0;
db.collection('users').doc（id）。 collection('tasks').onSnapshot((snapshot)=> /span>{
const tempTasks = [];
snapshot.forEach(
doc => {
var newData = doc.data();
newData.id = doc.id。
tempTasks.push（newData）。
setTasks（tempTasks）。
}
)
setTasks（tempTasks）。
});
}
},[id, userId])。
<View style={styles.tasks}>
{temptasks.map((task) => {
return (
<View style={{ margin。 4}}>
<TaskItem/>/span>
</View>
);
})}
</View>
uj5u.com熱心網友回復：
沒有渲染，因為你用同一個陣列更新狀態（它有相同的參考）。你必須回傳一個豐富的副本。
useEffect(() =>/span> {
if(userId!==''/span> && id !==userId)
setId（userId）。
if (id !== ''/span>) {
let counter = 0;
db.collection('users').doc（id）。 collection('tasks').onSnapshot((snapshot)=> /span>{
const tempTasks = [];
snapshot.forEach(
doc => {
var newData = doc.data();
newData.id = doc.id。
tempTasks.push（newData）。
setTasks(tempTasks); //Not this
setTasks([...tempTasks, newData]); // But this.
}
)
setTasks(tempTasks); //沒有效果。
});
}
},[id, userId])。
uj5u.com熱心網友回復：
雖然Pierre的答案完全可行，但你可以通過使用docs陣列和spread(...)運算子，以更少的代碼完成同樣的作業：
db.collection('users'/span>).doc(id)。 collection('tasks').onSnapshot((snapshot)=> /span>{
const tempTasks = snapshot.docs.map(doc=> {
return { ...doc.data(), id: doc.id };
})
setTasks（tempTasks）。
});
或者更短（盡管在這一步我們可能會失去一些可讀性）：
db.collection('user').doc(id)。 collection('tasks').onSnapshot((snapshot)=> /span>{
setTasks(snapshot.docs.map(doc => {
return { ...doc.data(), id: doc.id };
}));
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/308598.html
標籤：