如何使用 .map 方法渲染來自 Firebase 存儲的圖像？

Question

我正在嘗試使用 Firebase 存儲中的 .Map() 方法結合 Firestore 為每個組件渲染圖像。

            {Object.values(getData).map((data, index) => {
          getDownloadURL(ref(storage, `events/${data.name + data.artist + data.date + data.description}` ))
          .then((url) => {
            setImageSet(url)
            console.log(imageSet)
          })
          
          return(

          <CssVarsProvider>
            <Card variant="outlined" sx={{ width: 300, marginRight: 5}}>
              <AspectRatio>
                <div>
                  <img src={imageSet}/> 
                </div>
              </AspectRatio>
              <Typography mt={2}>{data.name}</Typography>
              <Typography level="body2">{data.description}</Typography>
            </Card>
            </CssVarsProvider>
            
          )
        })}

當我在 Firestore 上創建 1 個測試數組時，圖像呈現。 但是如果我創建兩個，那么它就像是試圖在 1 個組件上渲染兩個圖像。 我該如何解決？ 對不起，如果我不夠清楚，因為這是我第一次在 Stackoverflow 上發帖。

干杯

Answer 1

我已通過將 URL 值直接分配給 firestore 來解決此問題。

  const uploadImage = async () => {
if (imageUpload == null) return
const imageRef = ref(storage, `events/${eventName + artistName + eventDate + eventDescription}`)
uploadBytes(imageRef, imageUpload).then(() => {
  console.log("image uploaded")
  getDownloadURL(imageRef)
    .then((url) => {
      setGetImage((prev) => [...prev, url])
      console.log(getImage)
    })
  
})

}

const uploadData = async () => {

await setDoc(doc(db, "events", eventName), {
  name: eventName,
  artist: artistName,
  date: eventDate,
  description: eventDescription,
  uri: getImage,
})
console.log("db added")

}