Свойства элемента не отображаются при циклическом прохождении массива состояний - PullRequest
Новая
       73

Свойства элемента не отображаются при циклическом прохождении массива состояний

0 голосов
/ 01 мая 2020 
import React, { Component } from "react";
import { db } from "../firebase/firebase";
import "../css/pictures.css";

class Pictures extends Component {
  constructor() {
    super();
    this.state = {
      cards: [],
    };
  }

  componentDidMount() {
    const data = [];
    db.collection("cards").onSnapshot((snapshot) => {
      snapshot.docs.map((doc) => {
        let city = doc.data().city;
        let img = doc.data().img;
        let place = doc.data().place;
        const temp = {
          city: city,
          img: img,
          place: place,
        };
        data.push(temp);
      });
      this.setState({
        cards: [...this.state.cards, data],
      });
    });
    //console.log(data);
  }

  render() {
    console.log(this.state.cards);
    /*if (this.state.cards > 0) {
      console.log(this.state.cards[0].city);
    }*/
    return (
      <div className="cards">
        <h1>Hello</h1>
        {this.state.cards.map((card, index) => (
          <p key={index}>
            Hello, {card.place} from {card.city}!
          </p>
        ))}
      </div>
    );
  }
}
export default Pictures;

Я успешно могу получить данные из базы данных и обновить состояние. Я успешно обновляю состояние, потому что 

console.log(this.state.cards);

выполняется дважды. И массив карт состояния содержит данные из firebase.

Но

Вывод вышеупомянутого компонента

Hello (из тега h1)

Hello, from ! // здесь должно отображаться что-то вроде Hello London Bridge, из Лондона!

...