Как я могу загрузить изображения из хранилища Firebase и назначить их в качестве опоры для выполнения c в React?

Question

Я занимаюсь разработкой веб-приложения React с базой данных Firestore и пытаюсь загрузить несколько изображений из хранилища Firebase с помощью StorageRef и getDownloadURL (). Я хочу назначить URL-адреса изображений в качестве опоры для c, но это не работает. Кто-нибудь знает, что я делаю не так?

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)
    })
  })