從firebase獲取數據工作,但沒有顯示在反應應用程序中

吉漢·普納爾吉

這裡我想profileImage在 post 組件中顯示圖像、名稱一開始,當我對組件進行硬編碼時,它正在顯示。但是當我從firebasefirestore獲取數據時,它不會顯示。

硬編碼之一

我的代碼就像,

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在反應中顯示從 CSelect 元素中的 api 獲取的數組

“TypeError:listOfTours.map 不是函數”,同時嘗試在反應中顯示獲取的數據

從反應 API 中的 api 承諾中獲取數據

如何在反應中從動態表中獲取行數據

從獲取響應中訪問數據

如何在閃亮的 R 應用程序中從外部函數顯示 ggplot?

在反應中顯示有關搜索和過濾的數據問題

如何在反應中從多維數組中獲取特定的關鍵數據?

如何在我的應用程序中顯示從 API 響應收到的圖像

使用 flutter audioQuery 後沒有在我的應用程序中獲取歌曲文件

從 Express 服務器獲取數據到 React Native 應用程序的問題

有沒有辦法創建一個 Spring Boot 客戶端應用程序來從另一個 Spring Boot 應用程序讀取數據?

當我嘗試從 Bluehost 獲取數據以響應網站應用程序時,URL 被阻止(Access-Control-Allow-Origin - Missing Header)

如何僅顯示當前登錄用戶所做的約會,而不是從 Django 的數據庫中獲取所有約會

顯示從 API 獲取的數據

邏輯應用程序 - 從 Web 服務讀取 XML 響應並將解析的數據存儲在數據庫中

空獲取數據的異常反應

如何從 json 響應中獲取數據中的值?

如何從 JSON 數據中獲取列表以顯示在小部件中?

我可以知道如何從 Android Studio 中移動應用程序的 firebase firestore 中檢索用戶的所有數據嗎?

tableView 返回函數沒有從 API 調用中獲取數據,而是使 tableView 為空

如何從 json python 中獲取嵌套的響應數據

如何在 Azure Insights for Azure Function 應用程序中存儲和獲取 http 表單數據

我應該用什麼初始化最小數字以從以下沒有任何數組的代碼中獲得最小數字?

如何將從我的畫廊中選擇的圖像或我的顫振應用程序中的相機快照轉換為 base64,在我堅持到數據庫之前顯示它

如何從反應本機中的 firebase getDoc() 方法獲取變量值

從 sharedpreferences 獲取數據後不顯示數據

將數據庫添加到 Flask 應用程序後未顯示索引頁面

為什麼用戶的響應沒有記錄在數據庫中?