时间戳

首页 > 解决方案 > 如何从firebase中的集合中获取所有图片？

reactjs - 如何从firebase中的集合中获取所有图片？

问题描述

我正在关注 Firebase 中的文档，我可以发布图片，它们会进入我的收藏（图片），但我无法取回它们，我没有收到任何错误，但它永远不会在 get 方法中进入控制台日志，这是基本上按照文档完成的代码：

import React, { Component } from "react";
import firebase, { firestore } from "firebase";
const firebaseConfig = {
  apiKey: "AIzaSyBaYaChURjABW6kNE0D5yQaIU88RxhFAL4",
  authDomain: "jammer-documents.firebaseapp.com",
  databaseURL: "https://jammer-documents.firebaseio.com",
  projectId: "jammer-documents",
  storageBucket: "jammer-documents.appspot.com",
  messagingSenderId: "74638218427",
  appId: "1:74638218427:web:8ce7ba1fc2f8de7d4bc59e"
};
firebase.initializeApp(firebaseConfig);

export default class Pictures extends Component {
  state = {
    photos: []
  };
  componentDidMount() {
    let images = [];
    firebase
      .firestore()
      .collection("Pictures")
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          let imageData = {
            url: doc.data().url,
            created: doc.data().added
          };
          images.push(imageData);
        });
      });
    console.log("images", images);
    console.log(this.state.photos);
    this.setState({ photos: images });
    console.log(this.state.photos);
  }
  render() {
    const items = this.state.photos;

    return (
      <div className="container-fluid pt-3">
        <div className="card-columns">
          {items.map(i => (
            <div className="card">
              <img className="card-img-top materialboxed" src={i.url} alt="" />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

内部的代码块componentDidMount是异步的，因此setState会立即调用。您需要在请求返回后设置状态，并且在您遍历每个文档之后：

  let images = [];
    firebase
      .firestore()
      .collection("Pictures")
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach(function(doc) {
          let imageData = {
            url: doc.data().url,
            created: doc.data().added
          };
          images.push(imageData);
        });

        this.setState({ photos: images });
      });

推荐阅读