Заполните таблицу реагирования данными базы данных Firebase в реальном времени

Question

Я хочу заполнить свою таблицу, которую я создаю, используя библиотеку реагирования (реагировать-таблица-6) данными базы данных (используя базу данных реального времени) Я получаю значения в консоли, но не могу поместить в таблицу каждое значение в своем собственном поле. Ценности рендеринга, но я знаю, что я делаю здесь какую-то глупую ошибку. Посмотрите на это изображение, чтобы увидеть экран.

Кто-нибудь может объяснить, что я делаю здесь неправильно, ниже функция сброса, через которую я получаю значения ..

Состояние:

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();
}