Ошибка при чтении и просмотре данных Firebase из React-JS

Question

Мне просто нужно просмотреть мои сохраненные данные в Firebase на HTML-контенте с помощью ReactJs.Но я получил много ошибок при запуске.Основная проблема, я думаю, заключается в том, что для данных не задано значение 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: Невозможно прочитать свойство 'map' из null

Мне просто нужно получить все данные из firebase и загрузить эти данные в состояние.Затем загрузите эти данные на часть рендера.Может кто-нибудь помочь мне решить эту проблему?

Answer 1

Инициализация состояния с нулем:

this.state = {
  items:null
};

и обратный вызов от доступа к базе данных является асинхронным, поэтому метод визуализации будет вызван перед обратным вызовом и выдаст ошибку:

TypeError: Невозможно прочитать свойство 'map' из null

Принимая во внимание, что ошибка компонента метода рендеринга не монтируется, и this.setState из обратного вызова вызывается на не смонтированном компоненте.

Possivelобходные пути

Создание элементов в пустом массиве:

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