如何使用 .map 方法渲染来自 Firebase 存储的图像？

Question

I'm attempting to render an image for each component using the.Map() method from Firebase Storage combined with 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>
            
          )
        })}

When I create 1 test Array on Firestore, the image renders. But if I create two, then it is like it is trying to render two images on 1 component. How do I fix this? Sorry if I am not clear enough, since this is my first time posting on Stackoverflow.

Cheers

Answer 1

I have fixed the issue by assigning the URL value directly into 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")

}