[英]How to render datagrid with antd table component from rest api
I have the following code which renders a table with antd component. 我有以下代码,使用antd组件呈现表。 I created a fetchdata that is returning some information correctly
我创建了一个fetchdata,可以正确返回一些信息
Code: 码:
import React, { Component } from 'react';
import { Table} from 'antd';
import { adalApiFetch } from '../../adalConfig';
class ListTenants extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
fetchData = () => {
adalApiFetch(fetch, "/Tenant", {})
.then(response => response.json())
.then(responseJson => {
if (!this.isCancelled) {
this.setState({ data: responseJson });
}
})
.catch(error => {
console.error(error);
});
};
componentDidMount(){
this.fetchData();
}
render() {
const columns = [{
title: 'Tenant Id',
dataIndex: 'TenantId',
key: 'TenantId'
}, {
title: 'Tenant Url',
dataIndex: 'TenantUrl',
key: 'TenantUrl',
}];
const data = [{
TenantId: '1',
TenantUrl: 'John Brown'
}, {
TenantId: '2',
TenantUrl: 'Jim Green'
}, {
TenantId: '3',
TenantUrl: 'Joe Black'
}];
return (
<Table columns={columns} dataSource={data} />
);
}
}
export default ListTenants;
How do I convert the json received to columns and data? 如何将接收到的json转换为列和数据?
Assuming your question is how to render the object to match the keys in your Table data object, something like this should work: 假设您的问题是如何呈现对象以匹配Table数据对象中的键,则应执行以下操作:
repl here: https://repl.it/repls/FabulousWiryLicensing 此处代表: https : //repl.it/repls/FabulousWiryLicensing
This will give you the idea, but the cleaner solution is to map the responseJson
object you're getting back from the API call and setState
with that. 这将为您提供想法,但是更干净的解决方案是映射您从API调用和
setState
返回的responseJson
对象。
``` ```
class App extends Component {
constructor (props) {
super (props)
this.state = {
returnedData: [{
ClientId: '1',
Id: 'abc',
TenantDomainUrl: 'https://example.com'
}, {
ClientId: '2',
Id: 'abc',
TenantDomainUrl: 'https:example2.com'
}]
}
}
render() {
const { returnedData } = this.state;
const data = returnedData.map(row => ({
TenantId: row.Id,
TenantUrl: row.TenantDomainUrl
}))
const columns = [{
title: 'Tenant Id',
dataIndex: 'TenantId',
key: 'TenantId'
}, {
title: 'Tenant Url',
dataIndex: 'TenantUrl',
key: 'TenantUrl',
}];
return (
<div>
<h1>test</h1>
<Table columns={columns} dataSource={data} />
</div>
);
}
}
``` ```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.