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

render方法只能处理同步逻辑。 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的数据，而是显示相同的手工数据

1 个答案: