ReactJS 将数据从 Rest API 绑定到 table

Question

我正在调用我的休息端点来获取数据，我可以看到正在成功获取数据并将其存储在状态中。但是 table 没有显示任何数据。理想情况下，我希望它能够工作，以便在状态更改时 table 自动刷新。

import React from 'react';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

const parameterTypes = {
    0: 'STRING',
    1: 'BOOLEAN',
    2: 'INTEGETR',
    3: 'DECIMAL'
};

const categoryAvailable = {
    0: 'POS'
};

const options = {
    noDataText: 'No parameters founds.'
}

function enumFormatter(cell, row, enumObject) {
    return enumObject[cell];
}

export default class ParameterContainer extends React.Component {

    constructor() {
        super();
        this.state = { parameters: [] };
    }

    componentDidMount() {
        fetch('/api/parameters')
            .then(result => result.json())
            .then(params => {
                console.log(params);
                this.state.parameters = params;
                console.log(this.state);
            })
    }

    render() {
        return (
            <div>
                <h2>Parameters</h2>
                <BootstrapTable data={this.state.parameters} options={options}>
                    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='category' filterFormatted dataFormat={enumFormatter}
                                        formatExtraData={categoryAvailable} filter={{ type: 'SelectFilter', options: categoryAvailable }}>Category</TableHeaderColumn>
                    <TableHeaderColumn dataField='subCategory'>Sub Category</TableHeaderColumn>
                    <TableHeaderColumn dataField='parameter'>Parameter</TableHeaderColumn>
                    <TableHeaderColumn dataField='type' filterFormatted dataFormat={ enumFormatter }
                                       formatExtraData={parameterTypes} filter={{ type: 'SelectFilter', options: parameterTypes}}>Type</TableHeaderColumn>
                    <TableHeaderColumn dataField='roles'>Roles</TableHeaderColumn>
                </BootstrapTable>
            </div>
        )
    }
}

Answer 1

您不应该直接改变组件的 state（仅从中读取）。使用 this.setState({parameters: params}) 以便更好地使用组件生命周期。

ReactJS 将数据从 Rest API 绑定到 table

ReactJS Bind Data from Rest API to table

javascript

reactjs

react-bootstrap-table