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;

Вот как выглядит моя база данных Firebase

Вот как выглядят данные, которые я читаю из firebase

Чтобы протестировать React-Table, я создал StackBlitz с переменными ручной работы, а не с переменными, считанными из firebase. 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>
    );
  }
}