javascript - 无法将从 firebase 获取的数据显示到 reactjs webapp
问题描述
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 获取数据并推送到数组数据中。所以基本上数据是一个对象数组。但我无法迭代我
解决方案
您正在直接改变状态,这不会导致任何重新渲染。不要做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 });
});
}
推荐阅读
- javascript - 如何在 React JS 应用程序中使用 Google Analytics 代码?
- twig - 获取产品的所有照片
- fonts - 自托管网络字体:如何阻止有人窃取它们?
- javascript - 将对象数组转换并过滤为一个对象
- mysql - Kubernetes:无法连接到“xxxx”(110)上的 MySQL 服务器 - 网络策略
- r - R - parse_date_time() 的一周间隔,自 2018 年以来返回错误的星期一
- scala - 在 Scala 中返回隐式函数
- php - 如果在字符串中找到图像标签,如何停止函数
- c - 当我添加了 4 个元素时,为什么数组的长度是 3?
- amazon-web-services - 为每个部署环境传递 CDK 上下文值