如何在React的第一个渲染中立即显示可从Firebase下载的URL中的图像？

Question

-我正在从firebase的可下载URL中渲染图像，但是很奇怪的是，我第一次去该链接上查看该图像时并未渲染它。但是当我再次按下该按钮以显示图像时。

-这是我获取可下载网址并设置网址数组状态的代码段：

   setImages(adArray) {
       var imagesOfAds = [];
       var imagesOfBoolean = [];

       adArray.forEach((ad) => {
           imagesOfBoolean[ad.adId] = false;
           databaseStorageRef.child("AdImages/" + ad.adId + "/" + ad.imageOfTheAd).getDownloadURL().then(function(url) {
               imagesOfAds[ad.adId] = url;
               imagesOfBoolean[ad.adId] = true;
           }).catch((err) => {
               imagesOfBoolean[ad.adId] = true;
               imagesOfAds[ad.adId] = '';
           });
           do {
               console.log(imagesOfBoolean);
           } while (!imagesOfBoolean);
       });

       this.setState({
           imagesOfAds: imagesOfAds,
           imagesSet: true
       })

       this.forceUpdate();
   }

-这是我使用该网址的地方：

<Col xs={7} md={4}>
  <a href="#" onClick={() => this.changePage(ad.adId, ad.phoneNumber)}>
    {" "}
    <h4>
      {" "}
      <b> {ad.title} </b>{" "}
    </h4>{" "}
  </a>{" "}
  <br />
  {self.state.imagesOfAds[ad.adId] != "" ? (
    <img
      src={self.state.imagesOfAds[ad.adId]}
      className="imageOfAd"
      onClick={() => this.setState({ showMaximizationDialog: true })}
    />
  ) : (
    <Image
      onClick={() => this.setState({ showMaximizationDialog: true })}
      src={require("./images/oglasi.jpg")}
      thumbnail
    />
  )}
</Col>;

-这很好，唯一的问题是它是双击该选项后才呈现的图像。

-是否可以加快此过程？只需单击一下？