React-Table 不显示来自 Firebase 的数据

Question

我尝试将 firebase 实时数据库中的数据检索到 this stackoverflow post 中给出的反应表中。我确实得到了表格，但我没有从表格中的 firebase 获得任何数据。控制台没有显示任何内容。

我的 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]});
    });
  }