从 React-JS 读取和查看 Firebase 数据时出错答案

【问题标题】：Error in reading and viewing Firebase data from React-JS从 React-JS 读取和查看 Firebase 数据时出错
【发布时间】：2018-11-16 12:25:39
【问题描述】：

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

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;

这是我得到的错误。无法在未安装的组件上调用 setState（或 forceUpdate）。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。有时它会显示这样的错误。 TypeError: Cannot read property 'map' of null

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

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

你用 null 初始化状态：

this.state = {
  items:null
};

访问数据库的回调是异步的，所以会在回调之前调用render方法并抛出错误：

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

鉴于渲染方法组件上的错误不会挂载，并且回调中的 this.setState 正在被卸载的组件上调用。

可能的解决方法

将项目实例化为空数组：

this.state = {
  items:[]
};

或者阻止map在空对象上执行：

{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>
                    )
                })
: ''}

【讨论】：