无法显示从Firebase提取的数据到reactjs Webapp中

Question

import React，{Component} from'react'从'react-bootstrap'导入*作为ReactBootStrap从'react-bootstrap'导入{表}从“ ../fire”导入firebase导入“ ../App.css”从'./Foot']导入Foot

班级任命扩展了组成部分{

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>

    )
}
}导出默认约会；

上面是代码

我想从Firebase提取数据到react-js应用程序。我能够在控制台上获取全部数据，但无法将其迭代成表格形式。如下。在其中，我从firebase提取数据并将其推入数组数据中。因此，基本上数据是对象数组。但是我无法迭代i

import React，{Component} from'react'import *作为ReactBootStrap from'react-bootstrap'import {Table} from'react-bootstrap'import firebase from'../fire'import'../App.css'从'。/ ...