Javascript 在React.js应用程序上从firebase获取和显示图像

因此，我尝试从Firebase存储中获取图像，然后在React组件中显示它们。坦率地说，我是React/Javascript新手，我很难理解React/JS的异步本质，我遇到了这样一个问题：获取图像，但在获取完成后组件不会重新呈现

这是我主页上的代码，在useEffect函数中，我尝试获取图像，然后将其下载URL存储在一个数组中，然后在页面加载时将该数组设置为状态，即仅一次。由于这些都是承诺，它不会同步发生，当我第一次加载页面时，它不会显示任何图像。但是，如果我单击页面上的另一个组件，它会重新呈现我的图片组件，并且图像会显示出来？？？，因此我知道提取工作已经完成

    let storageRef = firebase.storage().ref()
    let calendarRef = React.createRef()

    const position = props.location.state.name.indexOf("@")
    const username = props.location.state.name.substring(0, position);

    const [simpleDate, setSimpleDate] = useState(null)
    const [selectedDate, setSelectedDate] = useState('')
    const [showModal, setShowModal] = useState(false)
    const [showCancelModal, setShowCancelModal] = useState(false)
    const [expectedPeople, setExpectedPeople] = useState(null)
    const [events, setEvents] = useState([])
    const [helpModal, showHelpModal] = useState(false)

    const [pictureURLs, setPictureURLs] = useState([])


    useEffect(() => {

        //load pictures
        const fetchImages = async () => {
            let urls = []
            storageRef.child('cabinPictures').listAll().then((result) => {
                result.items.forEach((imageRef) => {
                    imageRef.getDownloadURL().then(url => {
                        urls.push(url)
                    })
                })
            })
            return urls;
        }

        fetchImages().then(urls => {
            setPictureURLs(urls);
            console.log("inside .then() " + pictureURLs)
        })


        //fetch reservations
        firebase
            .firestore()
            .collection('reservations')
            .onSnapshot(serverUpdate => {
                const reservations = serverUpdate.docs.map(_doc => {
                    const data = _doc.data();
                    data['id'] = _doc.id;
                    return data;
                });

                let fetchedEvents = reservations.map(reservation => {
                        let date = reservation.reservationDate.toDate()
                        const month = ("0" + (date.getUTCMonth() + 1))
                        let dateString = date.getUTCFullYear() + "-" + ("0" + (date.getUTCMonth()+1)).slice(-2) + "-" + ("0" + date.getUTCDate()).slice(-2)
                        return {title: reservation.username + " - " + reservation.numPeople + " total", date: dateString, id: reservation.id, totalPeople: reservation.numPeople, month: month}
                    })
                console.log(fetchedEvents)
                setEvents(fetchedEvents)
            });
    }, [])    

运行上面的useEffect的主页中的My Pictures组件。我将URL作为道具从州传递：

<div className="pictures-div-container">
      <Pictures pictureURLs={pictureURLs}>

      </Pictures>
 </div>

---

在返回URL之前，必须解析所有嵌套的承诺

我对firebase API不是很了解，所以不确定result.items是实际数组还是具有foreach方法的对象。如果它是一个js数组，那么下面的代码应该可以使用

尝试以下方法：

//load pictures
const fetchImages = async() => {

  let result = await storageRef.child('cabinPictures').listAll();
  /// map() array of the imageRef.getDownloadURL() promises 
  let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());

  // return all resolved promises
  return Promise.all(urlPromises);
}

const urls = await fetchImages()
setPictureURLs(urls);
console.log("inside .then() ", urls) 

---

这就成功了！非常感谢，我知道我做错了什么。。。

        //fetch and load pictures
        const fetchImages = async () => {

            let result = await storageRef.child('cabinPictures').listAll();
            let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL())

            return Promise.all(urlPromises)
        }

        const loadImages = async () => {
            const urls = await fetchImages()
            setPictureURLs(urls)
        }

        loadImages()

//load pictures
const fetchImages = async() => {

  let result = await storageRef.child('cabinPictures').listAll();
  /// map() array of the imageRef.getDownloadURL() promises 
  let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());

  // return all resolved promises
  return Promise.all(urlPromises);
}

const urls = await fetchImages()
setPictureURLs(urls);
console.log("inside .then() ", urls)