как вывести все картинки из коллекции в firebase?

Question

Я слежу за документацией в 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>
    );
  }
}

Answer 1

Блок кода внутри componentDidMount имеет асин c, поэтому 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 });
      });