如何使用 React Table 和 Axios 在 React JS 中调用并显示 API？

Question

我是 React 的新手，我必须从 API 中获取数据并将其显示在 table 中。我正在使用 React Table 来显示 table 中的数据。如何实现以上？目前我在 Google chrome 开发控制台中没有看到服务器的任何响应。 React Table 实现使用本地数据工作，但是从 API 填充 table 无效。我的代码如下：

    class TableExp extends React.Component {
     constructor() {
     super();

  this.state = {
      tableData: {
        resourceID: '',
        resourceType: '',
        tenantName: '',
        dealerID: '',
        status: '',
        logFilePath: '',
        supportPerson: '',
        lastUpdatedTime: '',
      },
  };
}

 componentDidMount() {
    axios.get(`https://myAPI.restdb.io/rest/mock-data`, {
    headers: {'x-apikey': 'apiKEY'}
  })
.then(response => {
      this.setState({ tableData: response.data.tableData });
      //console.log(tableData);
});}

  render() {
  const { tableData } = this.state;

  return (
      <div>
       <ReactTable
            data={tableData}
            columns={[
              {
                Header: 'Details',
                columns: [
                  {
                    Header: 'Tenant Name',
                    accessor: '{this.state.tableData.tenantName}',
                  },
                  {
                    Header: 'Support Engineer',
                    id: '{this.state.tableData.supportEngineer}',
                    accessor: d => d.supportPerson,
                  },
                ],
              },
              {
                Header: 'Info',
                columns: [
                        {
                          Header: 'Dealer ID',
                          accessor:'{this.state.tableData.dealerID}',
                        },
                        {
                          Header: 'Status',
                          accessor:'{this.state.tableData.status}',
                        },
                      ],
              },
              {
                Header: 'Logs',
                columns: [
                        {
                          Header: 'File Path',
                          accessor:'{this.state.tableData.filePath}',
                        },
                      ],
              },
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
        />
     </div>
    );
}
   }

   export default TableExp;

Answer 1

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale-1">
    <script src="http://www.jimsproch.com/react/future/react.js"></script>
    <script src="http://www.jimsproch.com/react/future/react-dom.js"></script>
    <script src="http://www.jimsproch.com/react/babel-browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    class TableExp extends React.Component {
        constructor () {
            super();

            this.state = {
                tableData: [{
                    resourceID: '',
                    resourceType: '',
                    tenantName: '',
                    dealerID: '',
                    status: '',
                    logFilePath: '',
                    supportPerson: '',
                    lastUpdatedTime: '',
                }],
            };
        }

        componentDidMount () {
            axios.get('http://private-9ff5e-Whosebug.apiary-mock.com/questions', {
                responseType: 'json'
            }).then(response => {
                this.setState({ tableData: response.data });
            });
        }

        render () {
            const { tableData } = this.state;

            return (<ReactTable.default
                            data={tableData}
                            columns={[
                                {
                                    Header: 'Details',
                                    columns: [
                                        {
                                            Header: 'Tenant Name',
                                            accessor: 'tenantName',
                                        },
                                        {
                                            Header: 'Support Engineer',
                                            id: 'supportEngineer',
                                            accessor: d => d.supportPerson,
                                        },
                                    ],
                                },
                                {
                                    Header: 'Info',
                                    columns: [
                                        {
                                            Header: 'Dealer ID',
                                            accessor: 'dealerID',
                                        },
                                        {
                                            Header: 'Status',
                                            accessor: 'status',
                                        },
                                    ],
                                },
                                {
                                    Header: 'Logs',
                                    columns: [
                                        {
                                            Header: 'File Path',
                                            accessor: 'logFilePath',
                                        },
                                    ],
                                },
                            ]}
                            defaultPageSize={10}
                            className="-striped -highlight"
                    />
            );
        }
    };

    ReactDOM.render(<div><TableExp/></div>, document.getElementById("root"));
</script>
</body>
</html>

有适合您的解决方案：link to jsbin

我已经为你的示例制作了模拟 api，我使用了它。你可以看看here

关于我所做的修复的几句话：

属性"data"改为数组
固定访问器值（检查 documentation）

不关注ReactTable.default（浏览器环境示例需要）

如何使用 React Table 和 Axios 在 React JS 中调用并显示 API？

How to make the API call and display it in React JS using React Table and Axios?

javascript

reactjs

axios