這裡我想profileImage
在 post 組件中顯示圖像、名稱。一開始,當我對組件進行硬編碼時,它正在顯示。但是當我從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%2blF6djQ&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>
您需要返回map
函數中的任何內容,並key
為每個映射項設置一個唯一的:
{users.map(user => {
return <Post key={user.id}> .... </Post>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句