Javascript 从React JS读取和查看Firebase数据时出错

我只需要使用ReactJs在firebase中查看HTML内容上存储的数据。但是我在运行它的时候犯了很多错误。我认为主要的问题是数据没有通过this.setState命令设置为this.state。这是我的密码

import React, {Component} from 'react';
import {database} from "../firebase/firebase";

class MempoolTable extends Component {
   constructor() {
     super();

     this.state = {
      items:null
    };

}

componentDidMount(){
    let reportRef = database.ref("mempool");
    let newState = [];
    reportRef.once("value").then((snapshot) => {
            snapshot.forEach((childSnapshot) => {
                let items = childSnapshot.val();
                newState.push({
                    time: items.time,
                    hash: items.hash,
                    size: items.size,
                    weight: items.weight
                });
            });
            this.setState({ items: newState })
        });

    console.log(this.state);

}

render() {
    return(
        <div className="row" style={{marginTop: "30px"}}>
            <h4 style={{textAlign: "center", color: "#4D4F4E"}}><b>Memory Pool</b></h4>
            <h6 style={{textAlign: "center", color: "#4D4F4E"}}>(no of txs: 14, size: 168.81 kB)</h6>
            <div className="col-xl-9 mx-auto" style={{marginTop: "10px"}}>
                <table id="memPool" className="table table-bordered">
                    <thead>
                    <tr className="table-striped">
                        <th>AGE [H:M:S]</th>
                        <th>TRANSACTION HASH</th>
                        <th>FEE</th>
                        <th>TX SIZE[KB]</th>
                    </tr>
                    </thead>
                    <tbody>
                      {this.state.items.map(item => {
                        return (
                            <tr>
                                <td>{item.time}</td>
                                <td><a href="#">{item.hash}</a></td>
                                <td>{item.size}</td>
                                <td>{item.weight}</td>
                            </tr>
                        )
                    })}
                    </tbody>
                </table>
            </div>
        </div>
    );
}
}

export default MempoolTable;

import React，{Component}来自'React'；
从“./firebase/firebase”导入{database}；
类MempoolTable扩展组件{
构造函数（）{
超级（）；
此.state={
项目：空
};
}
componentDidMount（）{
让reportRef=database.ref（“mempool”）；
让newState=[]；
reportRef.one（“值”）。然后（（快照）=>{
snapshot.forEach（（childSnapshot）=>{
让items=childSnapshot.val（）；
newState.push({
时间：items.time，
hash:items.hash，
大小：items.size，
重量：物品重量
});
});
this.setState（{items:newState}）
});
console.log（this.state）；
}
render（）{
返回(
内存池
（txs编号：14，大小：168.81 kB）
年龄[H:M:S]
事务哈希
费用
发送大小[KB]
{this.state.items.map（item=>{
返回(
{item.time}
{item.size}
{item.weight}
)
})}
);
}
}
导出默认MempoolTable；

这就是我犯的错误无法对未安装的组件调用setState（或forceUpdate）。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。有时会显示如下错误TypeError:无法读取null的属性“map”

---

我只需要从firebase获取所有数据并将这些数据加载到状态。然后在渲染部分加载这些数据。有人能帮我解决这个问题吗？

您正在使用null初始化状态：

this.state = {
  items:null
};

并且访问数据库的回调是异步的，因此将在回调之前调用render方法并抛出错误：

TypeError:无法读取null的属性“map”

给定render方法组件无法装载的错误，并且正在对未装载的组件调用回调中的this.setState

可能的解决办法

将项实例化为空数组：

this.state = {
  items:[]
};

或防止在空对象上执行映射：

{this.state.items ? this.state.items.map(item => {
                    return (
                        <tr>
                            <td>{item.time}</td>
                            <td><a href="#">{item.hash}</a></td>
                            <td>{item.size}</td>
                            <td>{item.weight}</td>
                        </tr>
                    )
                })
: ''}

{this.state.items？this.state.items.map（item=>{
返回(
{item.time}
{item.size}
{item.weight}
)
})
: ''}