Question

我正在使用react-table进行团队项目，需要帮助弄清楚如何为数组数据设置react-table行。

我有一个来自Firebase数据库的数组对象students。当我在App.js的控制台中打印时，它会很好地打印所有数组，因此我知道它已正确导入。

有效方法：使用数据道具虚拟json文件studentsTest.json构建反应表行。
不起作用：将students数组对象传递给数据道具-它不会生成行。

将鼠标悬停在App组件上会显示状态：Array [29]，因此该状态在App组件级别是正确的students对象。

TdComponent：在表中说prop未定义。因此prevuilt 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>
);

为什么我的反应表TdComponent无法从状态中获取道具

0 个答案: