如何使用 .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")

}