使用 firebase 实时数据库数据填充 React Table

Question

我想用 firebase 数据（使用实时数据库）填充我使用 react 库（react-table-6）构建的表。我在控制台中获取值，但无法将每个值放在自己的字段中。价值观正在呈现，但我知道我在这里犯了一些愚蠢的错误。 See this image to see screen

谁能解释我在这里做错了什么， 在我检索值的删除函数下方..

状态：

this.state = {
         data: [ {trainerName: '', CourseName: '', evidence: '', comment: ''}
        ]}

功能：

get_course_list(){
        return firebase.database().ref('Users/CourseApprovals/').on('value', (snapshot) => {
            var data = [];
            snapshot.forEach((childSnapshot) => {
                var childData= childSnapshot.val();
                var child1 = childData.comments;
                var child2 = childData.evidence;
                var child3 = childData.selectedTrainer.label;
                var child4 = childData.selectedTrainer.value;
                var CompleteData = {child1, child2, child3, child4};
                data.push({ 
                    data: CompleteData 
                });
            })
            this.setState({
                data
            }, console.log(data))
        })
    }

    componentDidMount(){
        this.get_course_list();
    }

在渲染中，

 <ReactTable
                        data={data}
                        columns={[
                            { Header: "SL No", maxWidth: 100,filterable: false, Cell: props => {
                                return <div>{props.index + 1}</div>;
                              }},
                            { Header: "Trainer Name", accessor: "trainerName", className: "sticky", headerClassName: "sticky" },
                            { Header: 'Course Name', accessor: 'CourseName'},
                            { Header: "Evidence", accessor: "evidence" },
                            { Header: 'Comments', accessor: 'comment'},
                        ]}
                        defaultPageSize={10}
                        className="-striped -highlight"
                        />

Answer 1

问题可能在于将数据两次推送到data 数组中。试试这个：

get_course_list() {
  let data = [];
  firebase.database().ref('Users/CourseApprovals').on('value', snapshot => {
    if (snapshot.exists()) {
       // making sure data exists
       snapshot.forEach(child => {
         let a = child.val();
         // build the object
         let CompleteData = {
           child1: a.comments,
           child2: a.evidence,
           child3: a.selectedTrainer.label,
           child4: a.selectedTrainer.value
         }

         // you are currently doing: data.push({ data: CompleteData })
         // by doing so your data array looks like this:
         // data:[{ data: { child1: '', ... } }, ...]

         data.push(CompleteData)

         // now your array should look like this:
         // data:[{ child1: '', ... }, ...]

       });
       // setState
       this.setState({ data });
       console.log(data);
    }
  })
}

componentDidMount() {
  this.get_course_list();
}