Datatable не показывает динамические данные, которые я выбираю из базы данных в реагировать JS

Question

Я включил данные в свое веб-приложение реагировать.

Он работает с примерами данных, как я уже упоминал в списке кодовых страниц

Я пытался сделать это компонентом, но не получил результат. я новичок в ответ и не смог подсказать дальнейший прогресс.

Вот список моих импортных пакетов

import axios from 'axios'
import React, {Component} from 'react'
import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'
import { MDBDataTable} from 'mdbreact';

// Приведенный ниже вызов возвращает данные, которые я подтвердил в журнале консоли

axios.get('/api/pagelist').then(response => {

    var pagelist = JSON.stringify(response.data);
    console.log(pagelist);

});

// Пример тестовых данных, который работает с примером

var pagelist = [{
    name: 'Tiger Nixon',
    position: 'System Architect',
    office: 'Edinburgh',
    age: '61',
    date: '2011/04/25',
    salary: '$12320'
},
{
    name: 'Gavin Joyce',
    position: 'Developer',
    office: 'Edinburgh',
    age: '42',
    date: '2010/12/22',
    salary: '$92'
},
{
    name: 'Jennifer Chang',
    position: 'Regional Director',
    office: 'Singapore',
    age: '28',
    date: '2010/11/14',
    salary: '$357'
},
{
    name: 'Donna Snider',
    position: 'Customer Support',
    office: 'New York',
    age: '27',
    date: '2011/01/25',
    salary: '$112'
}
];

// Просто скопируйте функцию и измените столбцы в соответствии с документацией

const DatatablePage = () => {
    const data = {
        columns: [{
            label: 'ID',
            field: 'id',
            sort: 'asc',
            width: 60
            },
            {
                label: 'Name',
                field: 'name',
                sort: 'asc',
                width: 150
            },

            {
                label: 'Title',
                field: 'title',
                sort: 'asc',
                width: 150
            },
            {
                label: 'Slug',
                field: 'slug',
                sort: 'asc',
                width: 100
            },
            {
                label: 'Content',
                field: 'content',
                sort: 'asc',
                width: 250
            },
            {
                label: 'Created',
                field: 'created_at',
                sort: 'asc',
                width: 100
            }
        ],
        rows: pagelist
    };
    return (

        <MDBDataTable striped bordered hover data = {data}/>
    );
}

// Наконец экспортируем его

export default DatatablePage;

Answer 1

Похоже, вопрос для меня. Переменная данных, в которой вы храните данные страницы, ограничена обратным вызовом Axios. Как только код покинет этот обратный вызов, ваши данные больше не будут доступны.

axios.get('/api/pagelist').then(response => {

    // pageList scoped locally.  not accessible outside.  this is why the
    // console.log works, but there's no data in the table.
    var pagelist = JSON.stringify(response.data);  
    console.log(pagelist);

});

Если вы используете компонент, я предлагаю добавить конструктор и создать свойство состояния. Э.Г.

constructor(props) {
    super(props);

    this.state = {pageList: []} ;

}

Затем необходимо обновить это в axios.get ....

axios.get('/api/pagelist').then(response => {

    // The below line may not be exactly correct.  May need to review.
    this.setState({pagelist: JSON.stringify(response.data)}, console.log("state updated));

});

Наконец, назначение строк в методе datatables должно быть

rows: this.state.pagelist