React-Table не показывает данные из Firebase

Question

Я пытался извлечь данные из базы данных в реальном времени из firebase в таблицу реагирования, как указано в в этом сообщении stackoverflow .Я действительно получаю таблицу, но я не получаю никаких данных из базы данных в таблице.Консоль ничего не показывает как таковая.

Моя структура базы данных в реальном времени для Firebase выглядит как this .

Ниже приведен мой код TablePages.js

import React, { Component } from 'react';
import ReactTable from "react-table";
import "react-table/react-table.css";
import firebase from 'firebase/app';
// import 'firebase/auth';
import 'firebase/database';
import '../../firebase'


export default class LockTable extends Component {
  state = { data: [] };

  componentDidMount() {
    const database = firebase.database().ref("/Assets");
    database.on("value", snapshot => {
      const data = [];

      snapshot.forEach(childSnapShot => {
        const asset = {
          AssetNumber: childSnapShot.key.toString(),
          GivenBy: childSnapShot.val().GivenBy,
          TakenBy: childSnapShot.val().TakenBy
        };

        data.push(asset);
      });

      this.setState(prevState => {
        return { data: [...prevState.data, ...data] };
      });
    });
  }

  render() {
    const columns = [
      {
        Header: "Asset Number",
        accessor: "AssetNumber"
      },
      {
        Header: "Given By",
        accessor: "GivenBy"
      },
      {
        Header: "Taken By",
        accessor: "TakenBy"
      },

    ];

    return (
      <div>
        <ReactTable data={this.state.data} columns={columns} />
      </div>
    );
  }
}

Может кто-нибудь сказать мне, какая часть пошла не так?

Обновление: я обновил структуру базы данных.

Answer 1

Попробуйте это,

componentDidMount() {
    const database = firebase.database().ref("/Assets");
    database.on("value", async snapshot => {
      const data = [];

      await snapshot.forEach(childSnapShot => {
        const asset = {
          AssetNumber: childSnapShot.key.toString(),
          GivenBy: childSnapShot.val().GivenBy,
          TakenBy: childSnapShot.val().TakenBy
        };

        data.push(asset);
      });

      this.setState({data:[...this.state.data, ...data]});
    });
  }