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

Question

我尝试将数据从firebase实时数据库检索到this stackoverflow post中给出的react-table中。我确实得到了表，但我没有从表中的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]});
    });
  }