Question

我只需要使用ReactJs在HTML内容中查看我在firebase中存储的数据。但是在运行它时遇到了很多错误。我认为主要问题是未使用 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;

这是我得到的错误。无法在已卸载的组件上调用setState（或forceUpdate）。这是一个无操作，但它表示应用程序中存在内存泄漏。要修复，请取消componentWillUnmount方法中的所有订阅和异步任务。有时它会显示我这样的错误。 TypeError：无法读取null

的属性“map”

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

Answer 1

使用null初始化状态：

this.state = {
  items:null
};

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

TypeError：无法读取属性＆＃39; map＆＃39;为null

鉴于render方法组件上的错误不会挂载，并且在未安装的组件上调用了来自回调的this.setState。

Possivel解决方法

将项目实例化为空数组：

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

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

1 个答案: