這里我想在 post 組件中顯示影像、名稱、profileImage。一開始，當我對組件進行硬編碼時，它正在顯示。但是當我從 firebase firestore 獲取資料時，它不會顯示。
我的代碼就像，
function PostView() {
const [users, setUsers] = useState([]);
useEffect(() =>
onSnapshot(collection(db, 'users'), (snapshot) =>{
setUsers(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})))
})
,[])
return(
<Container>
<Post>
<PostHeader>
{users.map(user => {
<Details>
<img src="https://scontent.fcmb1-2.fna.fbcdn.net/v/t1.6435-1/p240x240/242493320_1241149729697908_2159125378599502668_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=7206a8&_nc_ohc=1t7tMDC5RpsAX9WzrMX&_nc_ht=scontent.fcmb1-2.fna&oh=266e29db20581ce3ab83ce9662817e70&oe=61A5C5AC" alt="" />
<span style={{marginLeft: 10}}>Profile Name</span>
</Details>
})}
<span style={{fontSize: 22}}>...</span>
</PostHeader>
<PostImage src='https://th.bing.com/th/id/R.e634d465fc117284db4f81ecceabbf4e?rik=HeQgRgW+lF6djQ&pid=ImgRaw&r=0' />
<PostFooter>
<Likes>
<img src="https://img.icons8.com/material-outlined/24/000000/filled-like.png"/>
<img src="https://img.icons8.com/material-outlined/24/000000/speech-bubble.png"/>
</Likes>
<img src="https://img.icons8.com/material-outlined/24/000000/share.png"/>
</PostFooter>
</Post>
</Container>
)
}
但是當我使用 firestore 資料時，它不會顯示，
<Container>
{users.map(user => {
<Post>
<PostHeader>
<Details>
<img src={user.profileImage} alt="" />
<span style={{marginLeft: 10}}>{user.name}</span>
</Details>
<span style={{fontSize: 22}}>...</span>
</PostHeader>
<PostImage src={user.postImgUrl} />
<PostFooter>
<Likes>
<img src="https://img.icons8.com/material-outlined/24/000000/filled-like.png"/>
<img src="https://img.icons8.com/material-outlined/24/000000/speech-bubble.png"/>
</Likes>
<img src="https://img.icons8.com/material-outlined/24/000000/share.png"/>
</PostFooter>
</Post>
})}
</Container>
uj5u.com熱心網友回復：
您需要回傳map函式中的任何內容，并key為每個映射項設定一個唯一值：
{users.map(user => {
return <Post key={user.id}> .... </Post>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344933.html
標籤：javascript 反应