為什么我的狀態顯示在我的控制台日志中而不是我的 HTML 中？

Question

我有一個連接到 Firebase 以接收數據的 React 組件。 我能夠連接並獲取我想用來注銷控制台的數據，但我無法用 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;

Answer 1

問題是您在映射狀態數組之前不必要地使用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應該是等效的。

Answer 2

我認為使用projects.description應該可以更好地完成工作，並擺脫不必要的objects.keys

Answer 3

謝謝@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;