无法将从 firebase 获取的数据显示到 reactjs webapp答案

【问题标题】：Not able to show fetched data from firebase into reactjs webapp无法将从 firebase 获取的数据显示到 reactjs webapp
【发布时间】：2020-09-12 02:44:58
【问题描述】：

import React, { Component } from 'react'
import * as ReactBootStrap from 'react-bootstrap'
import { Table } from 'react-bootstrap'
import firebase from '../fire'
import '../App.css'
import Foot from './Foot'


class Appointment extends Component {

  state = {
    data: []
  }
  componentDidMount() {
    firebase.database().ref("appoinment").once("value").then(snapShot => {
      snapShot.forEach(item => {

        this.state.data.push({
          id: item.key,
          name: item.val().name,
          age: item.val().age,
          gender: item.val().gender,
          Description: item.val().Description,
          date: item.val().Appointdate
        });

      })
    })
  }

  render() {
    return (
      <div className='cardback'>
        <div>
          <br></br>
          {console.log(this.state)}

          <br></br>
          <h2 style={{ textAlign: 'center', fontSize: '30px' }}>Today's Appointment</h2>
          <br></br>
          <br></br>
          <Table striped bordered hover variant="dark" style={{ width: "1200px", margin: 'auto' }}>
            <thead>
              <tr>
                <td>id</td>
                <td>name</td>
                <td>age</td>
                <td>gender</td>
                <td>Description</td>
                <td>date</td>
                <td>Status</td>
              </tr>
            </thead>
            <tbody>

              **{
                this.state.data.map((item) =>
                  <tr>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.age}</td>
                    <td>{item.gender}</td>
                    <td>{item.Description}</td>
                    <td></td>
                  </tr>
                )
              }**
                        </tbody>
          </Table>
          <br></br>
          <br></br>


        </div>
        <Foot></Foot>

      </div>

    )
  }
}
export default Appointment;

这是上面的代码

我想从 firebase 获取数据到 react-js 应用程序。我能够在控制台上获取整个数据，但无法将其迭代为表格形式。如下。在其中我从 firebase 获取数据并推送到数组数据中。所以基本上数据是一个对象数组。但我无法迭代 i

【问题讨论】：

花点时间阅读帮助中心的editing help。 Stack Overflow 上的格式化与其他站点上的不同。您的帖子看起来越好，其他人就越容易阅读和理解它。
console.log 的输出是什么样子的？我认为您只是缺少将 <tr> 括在括号中的 () map 函数返回。

标签： javascript arrays reactjs firebase firebase-realtime-database

【解决方案1】：

您正在直接改变状态，这不会导致任何重新渲染。不要做this.state.data.push({id:item.key,

使用 this.setState

componentDidMount() {
  firebase
    .database()
    .ref("appoinment")
    .once("value")
    .then((snapShot) => {
      let updatedData = [];
      snapShot.forEach((item) => {
        updatedData.push({
          id: item.key,
          name: item.val().name,
          age: item.val().age,
          gender: item.val().gender,
          Description: item.val().Description,
          date: item.val().Appointdate,
        });
      });
      this.setState({ data: updatedData });
    });
}

【讨论】：