加载图像时更新图库

Question

我正在从firebase下载图片网址，然后将其传递给我的react-photo-gallery，但目前他们还没有加载，直到我点击本地存在的现有图片。我假设这会触发画廊重新加载，但我不知道如何按需执行此操作。

        var allPhotos = [];

  class App extends Component {

    constructor() {
      super();
      this.getFirstImagesFromAllusers();
      this.state = { currentImage: 0 };
    }

    addImage(image) {
      newPhotos = allPhotos.push(image);
      this.setState({
        allPhotos: newPhotos,
      });
    }
    render() {
      return (
        <div className='app'>
          <header>
              <div className='wrapper'>
                <h1>Scott and Viki</h1>

              </div>
          </header>
          <div>
            <Gallery photos={allPhotos} onClick={this.openLightbox} />
            <Lightbox images={allPhotos}
              onClose={this.closeLightbox}
              onClickPrev={this.gotoPrevious}
              onClickNext={this.gotoNext}
              currentImage={this.state.currentImage}
              isOpen={this.state.lightboxIsOpen}
            />
          </div>
        </div>
      );
    }

    getFirstImagesFromAllusers() {
      const dataRef = firebase.database().ref('AllUsers');
      var allUsers = [];
      dataRef.on('value', function(snapshot) {
        snapshot.forEach(function(user) {
          var images = [];
          const name = user.val().name;
          user.forEach(function(imagesSnapshot) {
            imagesSnapshot.forEach(function(imageSnapshot) {
              const count = imageSnapshot.val().count;
              const dateTime = imageSnapshot.val().dateTime;
              const isAnImage = imageSnapshot.val().isAnImage;
              const name = imageSnapshot.val().name;
              const url = imageSnapshot.val().url;
              const image = new Image(count, dateTime, isAnImage, name, url);
              images.push(image)
              allPhotos.push( { // reload/update gallery here
                src: image.url,
                width: 1,
                height: 1
              })
            });
          });
          user = new User(name, images);
          console.log(user.imageWithLowestCount());
          allUsers.push(user);
          console.log(allUsers);
        });
      })
    }
  }

理想情况下，当我在for循环中调用allPhotos.push时，库会重新加载。我尝试在forEach循环中调用this.addImage，但收到错误Cannot read property 'addImage' of undefined

任何帮助都会很棒，因为这是我的第一个反应应用