如何从 firebase 存储下载图像并将它们作为 prop 分配给 React 中的文档？

Question

我正在开发一个带有 Firestore 数据库的 React Web 应用程序，并尝试使用 StorageRef 和 getDownloadURL() 从 Firebase 存储中下载多个图像。我想将图像 URL 作为 prop 分配给文档，但它不起作用。有谁知道我做错了什么？

function useDishes() {
  const [dishes, setDishes] = useState([])

  useEffect(() => {
    firebase
      .firestore()
      .collection('dishes')
      .onSnapshot(snapshot => {
        const storage = firebase.storage()
        const storageRef = storage.ref()
        const newDish = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data(),
          getDownloadURLs: storageRef
            .child(doc.data().imageString)
            .getDownloadURL()
            .then(url => {
              console.log(url)
              console.log(doc.data())
              //assign url as prop to doc
              return url
            }),
        }))
        setDishes(newDish)
      })
  }, [])

  return dishes
}

Answer 1

由于 getDownloadURL 也是一个异步调用，您需要在其回调中调用 setDishes。

firebase
  .firestore()
  .collection('dishes')
  .onSnapshot(snapshot => {
    const storage = firebase.storage()
    const storageRef = storage.ref()
    const promises = snapshot.docs.map(doc => storageRef.child(doc.data().imageString).getDownloadURL());
    Promise.all(promises).then(downloadURLs => {
      const newDish = snapshot.docs.map((doc, index) => ({
        id: doc.id,
        ...doc.data(),
        getDownloadURLs: downloadURLs[index]
      }))
      setDishes(newDish)
    })
  })

如何从 firebase 存储下载图像并将它们作为 prop 分配给 React 中的文档？

How can I download images from firebase storage and assign them as a prop to doc in React?

firebase

reactjs

firebase-storage

react-props

react-hooks