Error in reading and viewing Firebase data from React-JS

Question

I just need to view my stored data in firebase on the HTML content using ReactJs. But I got lots of error while running it. The main issue I think is data not set to the this.state with this.setState command. Here is my code.

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;

This is the error I got. Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. And sometimes it shows me error like this. TypeError: Cannot read property 'map' of null

I just need to get all the data from firebase and load those data into the state. Then load those data on render part. Can someone help me to fix this issue?

Answer 1

Your initializing the state with null:

this.state = {
  items:null
};

and callback from accessing database is asynchronous, so the render method will be called before the callback and will throw the error :

TypeError: Cannot read property 'map' of null

Given the error on the render method component wont mount, and this.setState from callback is being invoked on an unmounted component.

Possivel workarounds

Instantiate items to an empty array :

this.state = {
  items:[]
};

Or prevent map for being executed on a null object:

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