Почему мой реактивный стол TdComponent не получает реквизиты из моего штата

Question

Я работаю над командным проектом, использующим реагирующую таблицу, и мне нужна помощь, чтобы выяснить, как установить строки реагирующей таблицы для данных моего массива.

У меня есть объект массива students из базы данных Firebase. Когда я печатаю в консоли в App.js, он хорошо печатает весь массив, поэтому я знаю, что он импортирован правильно.

• Что работает: Построение строк таблицы реакций с использованием файла данных поддержки JSON studentsTest.json.

• Что не работает: Передача students объекта массива в реквизит данных - он не строит строки.

При наведении курсора на компонент приложения отображается состояние: массив [29], поэтому состояние является правильным students объект на уровне компонента приложения.

• TdComponent: в таблице указано, что реквизиты не определены. Таким образом, предыдущий TdComponent не получает мои реквизиты.

Как передать данные массива в этот дочерний компонент?

<ReactTable
       columns={columns}
       data={this.state.students} //- array of students, imported from database , doesn't build rows
       // data={studentsTest}    - dummy json file, works, builds rows
       >
</ReactTable>

Попытка: добавлен componentDidMount () для установки состояния на students. Я попытался изменить свой метод componentDidMount, но не могу найти правильный путь.

import React, {Component} from 'react';
import ReactTable from 'react-table'
import './App.css';
import NavTab from './components/navTab';
import "react-table/react-table.css";
import jsonData from './mock-data/grades.json'
import students from './Data/database'
import studentsTest from './mock-data/studentsTest.json'
import database from './Data/database'
import * as firebase from 'firebase'
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      //students: this.props.students
      students
    }
  }

  componentDidMount(){
    const rootRef = firebase.database().ref().child('react')
    const studentRef = rootRef.child('students')
    console.log(studentRef)
    studentRef.on('value', snap => {
      this.setState({
        students: students
      });
    });
  }

return (
      <ReactTable
        columns={columns}
        data={this.state.students} //- doesn't build rows
        // data={studentsTest}    - works, builds rows
        >
      </ReactTable>
);