React-Table 不显示来自 firebase 的数据，但显示相同的手工数据

Question

我一直在尝试为学校项目制作储物柜组织/作业应用程序，但我发现在显示 firebase 数据库时遇到了障碍。我发现 React-Table，这似乎是显示数据的好方法，但我在实际显示数据时遇到了一些问题。当我运行应用程序时，它说找不到任何行。

下面是我的 LockTable.js 组件的代码。

import React, { Component } from 'react';
import firebase from 'firebase/app';
import { auth } from '../firebase';
import 'firebase/database';
//import { database } from '../firebase';

import ReactTable from "react-table";
import 'react-table/react-table.css';

class LockTable extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const database = firebase.database().ref("LockerList");
        const data1 = [];

        database.on('value',snapshot => {
            //Read each item in LockerList
            //Store it in a temporary array

            snapshot.forEach(childSnapShot => {
              //childSnapShot.key is the name of the data
              //childSnapShot.val() is the value of the data

              const Locker = {
                LockerNumber : childSnapShot.key.toString(), 
                Available : childSnapShot.val().Available,
                StudentName : childSnapShot.val().StudentName,
                StudentNumber : childSnapShot.val().StudentNumber.toString()    ,
                Period : childSnapShot.val().StudentPeriod.toString(),
                Teacher : childSnapShot.val().Teacher,
              };


              data1.push(childSnapShot.val());

            });
        });

        const columns = [
            {
                Header: 'Locker Number',
                accessor: 'LockerNumber'
            }, {
                Header: 'Available',
                accessor: 'Available',
            }, {
                Header: 'Student Name',
                accessor: 'StudentName',
            }, {
                Header: 'Student Number',
                accessor: 'StudentNumber',
            }, {
                Header: 'Period',
                accessor: 'Period',
            }, {
                Header: 'Teacher',
                accessor: 'Teacher',
            } ];

        console.log(data1);

        return(
            <div>
                <ReactTable
                    data={data1}
                    columns={columns}
                />
            </div>
        );
    }
}


export default LockTable;

This is what my firebase database looks like

This is what the data I read from firebase looks like

为了测试 React-Table，我制作了一个带有手工变量而不是从 firebase 读取的变量的 StackBlitz。 https://stackblitz.com/edit/react-table-help

打开控制台，可以看到StackBlitz版本的数据和我的版本是一模一样的，只是StackBlitz版本有显示数据，我的版本没有。

有谁知道为什么我的版本不起作用？如有任何帮助，我们将不胜感激！

Answer 1

渲染方法只能处理同步逻辑。 firebase 数据库逻辑是异步的，因此要使用它，您可以将其放在 componentDidMount 中，并在获取快照时将数据放入组件状态。

例子

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

  componentDidMount() {
    const database = firebase.database().ref("LockerList");

    database.on("value", snapshot => {
      const data = [];

      snapshot.forEach(childSnapShot => {
        const locker = {
          LockerNumber: childSnapShot.key.toString(),
          Available: childSnapShot.val().Available,
          StudentName: childSnapShot.val().StudentName,
          StudentNumber: childSnapShot.val().StudentNumber.toString(),
          Period: childSnapShot.val().StudentPeriod.toString(),
          Teacher: childSnapShot.val().Teacher
        };

        data.push(locker);
      });

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

  render() {
    const columns = [
      {
        Header: "Locker Number",
        accessor: "LockerNumber"
      },
      {
        Header: "Available",
        accessor: "Available"
      },
      {
        Header: "Student Name",
        accessor: "StudentName"
      },
      {
        Header: "Student Number",
        accessor: "StudentNumber"
      },
      {
        Header: "Period",
        accessor: "Period"
      },
      {
        Header: "Teacher",
        accessor: "Teacher"
      }
    ];

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

React-Table 不显示来自 firebase 的数据，但显示相同的手工数据

React-Table doesn't show data from firebase, but shows identical, handmade data

javascript

firebase

reactjs

firebase-realtime-database

react-table