我想在電子應用程式的一個頁面中顯示用戶資料。我從 firebase/firestore 獲取資料，然后將其放入陣列中，然后，我想在表格中顯示該資料，但無法在頁面上顯示資料。
這是我的代碼：
function Home() {
const [allUsers] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const querySnapshot = await getDocs(collection(db, 'users'));
let allDocs = [];
querySnapshot.forEach((doc) => {
allDocs.push({ ...doc.data(), id: doc.id });
});
for (const item of allDocs) {
allUsers.push(item);
}
} catch (err) {
console.log(err);
}
console.log(allUsers)
};
fetchData();
}, []);
return <div className="home">
{Object.keys(allUsers).map((keyName) => (
<p>{allUsers[keyName].firstname}</p>
))}
</div>;
}
以下是資料的樣子：
uj5u.com熱心網友回復：
您應該使用狀態設定器來更新allUsers. 您正在改變資料（反 React 模式）。嘗試這樣做（我在代碼中添加了注釋）：
function Home() {
const [allUsers, setAllUsers] = useState([]); // line I changed
useEffect(() => {
const fechedUsers =[]; // line I added
const fetchData = async () => {
try {
const querySnapshot = await getDocs(collection(db, 'users'));
let allDocs = [];
querySnapshot.forEach((doc) => {
allDocs.push({ ...doc.data(), id: doc.id });
});
for (const item of allDocs) {
fechedUsers.push(item);
}
} catch (err) {
console.log(err);
}
setAllUsers(fechedUsers) // line I added
};
fetchData();
}, []);
// lines I changed
return <div className="home">
{allUsers.map(user => <p>{user.firstname}</p>)}
</div>;
}
uj5u.com熱心網友回復：
當前，您用于Object.keys()映射陣列。當您使用此函式時，您會收到一個陣列，其中包含陣列中的所有索引。[0, 1, ... ]因此，這意味著您將根據資料的長度獲得一個包含資料的陣列。
但是因為您使用陣列，您可以立即映射陣列中的所有物件。像這樣：
return <div className="home">
{allUsers.map((user) => (
<p>{user.firstname}</p>
))}
</div>
用戶變數將是您在 allUsers 陣列中推送的物件。您還應該使用狀態設定器，例如useState
uj5u.com熱心網友回復：
您不需要使用索引來迭代回應。當您使用 map 函式時，您可以訪問索引作為 map 函式內部的引數，并且可以在需要時使用它。
return (
<div className="home">
{allUsers.map((user, index) => {
return(
<div key={index} className='user-data'>
//if you're using a table might need to change the `p` tag with `td` inside a `tr`
<p>{user.firstname} </p>
</div>
)
}
)}
</div>);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476216.html
標籤：javascript html 反应 电子
上一篇：為什么ReactDOM.render()會渲染任何東西，但ReactDOM.createRoot().render()不會？