数据表没有显示我在反应 js 中从数据库中获取的动态数据

Question

我在我的 React js 网络应用程序中集成了数据表。

它适用于我在代码页面列表中提到的示例数据

I have tried to make it component but did not get the result. I am new in react and did not able to clue to further progress.

这是我的导入包列表

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: '320'
},
{
    name: 'Gavin Joyce',
    position: 'Developer',
    office: 'Edinburgh',
    age: '42',
    date: '2010/12/22',
    salary: ''
},
{
    name: 'Jennifer Chang',
    position: 'Regional Director',
    office: 'Singapore',
    age: '28',
    date: '2010/11/14',
    salary: '7'
},
{
    name: 'Donna Snider',
    position: 'Customer Support',
    office: 'New York',
    age: '27',
    date: '2011/01/25',
    salary: '2'
}
];

// 按照文档的指导复制函数并更改列

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

});

最后，数据表方法中的行赋值需要

rows: this.state.pagelist

数据表没有显示我在反应 js 中从数据库中获取的动态数据

Datatable did not show dynamic data which i fetch from database in react js

reactjs

datatables

mdbreact