无法将来自 firebase 的提取数据显示在 reactjs webapp 中

Question

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获取数据并将其推送到数组中。所以基本上数据是一个对象数组。但我无法迭代我

Answer 1

您正在直接改变状态，这不会导致任何重新渲染。不要做this.state.data.push({id:item.key,Use this.setStatecomponentDidMount() {&nbsp; firebase&nbsp; &nbsp; .database()&nbsp; &nbsp; .ref("appoinment")&nbsp; &nbsp; .once("value")&nbsp; &nbsp; .then((snapShot) => {&nbsp; &nbsp; &nbsp; let updatedData = [];&nbsp; &nbsp; &nbsp; snapShot.forEach((item) => {&nbsp; &nbsp; &nbsp; &nbsp; updatedData.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: item.key,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: item.val().name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; age: item.val().age,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gender: item.val().gender,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Description: item.val().Description,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date: item.val().Appointdate,&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; this.setState({ data: updatedData });&nbsp; &nbsp; });}