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

React-Table不显示Firebase中的数据

1 个答案: