0

我在我的 react js web 应用程序中集成了数据表。

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

我试图使它成为组件，但没有得到结果。我是新来的反应，并没有能够线索进一步的进展。

这是我的导入包列表

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

1 回答 1

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

});

假设您使用的是组件，我建议您添加一个构造函数并创建一个 state 属性。例如

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
于 2019-03-15T08:03:11.887 回答