桃花長相依
2022-09-02 21:07:43
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獲取數據并將其推送到數組中。所以基本上數據是一個對象數組。但我無法迭代我
1 回答

叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
您正在直接改變狀態,這不會導致任何重新渲染。不要做this.state.data.push({id:item.key,
Use 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 });
});
}
添加回答
舉報
0/150
提交
取消