Почему мое состояние отображается в журналах консоли, а не HTML? - PullRequest
Новая
       5

Почему мое состояние отображается в журналах консоли, а не HTML?

2 голосов
/ 16 марта 2020

У меня есть компонент React, который подключается к Firebase для получения данных. Я могу подключиться и получить данные, которые я хотел бы использовать для выхода на консоль, но я не могу вернуть их с HTML. На самом деле HTML возвращает "01" . Может кто-нибудь сказать мне, почему данные отображаются в консоли, а не на странице, а 01 отображается в браузере? 

/* eslint-disable */
import React, { Component } from "react";
import firebase from "./Firebase";
class ActiveProjects extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      projects: []
    };
  }
  componentDidMount() {
    const db = firebase.firestore();
    db.collection("projects")
      .get()
      .then(querySnapshot => {
        const data = querySnapshot.docs.map(doc => doc.data());
        data.forEach(cur_doc => {
          this.state.projects.push({ ...cur_doc });
        });
      })

      .then(result => {
        this.setState({ isLoaded: true });
      });
  }

  render() {
    const { isLoaded, projects } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          {Object.keys(
            projects.map((proj, index) => (
              <div>
                <h2>{proj["description"]}</h2>
                {console.log(index)}{console.log(proj["description"])} 
                //Output 
                // 0 
                // This is some text for the description. 
                // 1 
                // My description text.
              </div>
            ))
          )}
        </div>
      );
    }
  }
}
export default ActiveProjects;

Ответы [ 3 ]

1 голос
/ 16 марта 2020

Проблема в том, что вы без необходимости используете Object.keys перед отображением массива состояний. Удали это.

Object.keys(projects) берет ваш массив и создает новый с ключами в качестве значений. Поскольку ключи в массиве являются индексами, ваши значения становятся [0,1].

Пример: 

const myArray = ['value1', 'value2'];

console.log(Object.keys(myArray))

Вы отображаете вывод Object.keys, поэтому независимо от того, что вы делаете внутри функции отображения, он всегда будет возвращать массив индексов.

Во-вторых, , как указал @EmileBergeron, вы изменяете состояние. Это, по-видимому, не является непосредственной причиной вашей проблемы, но ее нужно исправить.

Чтобы исправить, измените на это: 

const data = querySnapshot.docs.map(doc => doc.data());
this.setState({ projects: data });

ForEach не кажется необходимым, так как вы Используете все значения, ничего не меняя. Установка состояния на data должна быть эквивалентной.

0 голосов
/ 16 марта 2020

Спасибо @EmileBergeron @codemon @BrianThompson! Код ниже достиг желаемого результата. 

/* eslint-disable */
import React, { Component } from "react";
import firebase from "./Firebase";
class ActiveProjects extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      projects: []
    };
  }
  componentDidMount() {
    const db = firebase.firestore();
    db.collection("projects")
      .get()
      .then(querySnapshot => {
        const data = querySnapshot.docs.map(doc => doc.data());
        this.setState({ isLoaded: true, projects: data });
      });
  }

  render() {
    const { isLoaded, projects } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          {projects.map((project, index) => (
            <h2>{project.description}</h2>
          ))}
        </div>
      );
    }
  }
}
export default ActiveProjects;
0 голосов
/ 16 марта 2020

Я думаю, что использование projects.description должно сделать работу лучше, а также избавиться от ненужного objects.keys

...