我是React的新手,我必须从API中获取数据并将其显示在表格中。我使用React Table来显示表中的数据。如何实现以上?目前我没有在Google Chrome开发者控制台中看到服务器的任何响应。 React Table实现使用本地数据,但是从API填充表是行不通的。 我的代码如下:
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;
答案 0 :(得分:5)
<!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-stackoverflow.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
关于我所做的修补的几句话:
不要注意ReactTable.default(浏览器env示例需要)