如何從Rest API使用Antd Table組件呈現DataGrid

Question

我有以下代碼，使用antd組件呈現表。 我創建了一個fetchdata，可以正確返回一些信息

碼：

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;

如何將接收到的json轉換為列和數據？

Answer 1

假設您的問題是如何呈現對象以匹配Table數據對象中的鍵，則應執行以下操作：

此處代表： https : //repl.it/repls/FabulousWiryLicensing

這將為您提供想法，但是更干凈的解決方案是映射您從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>
    );
  }
}

```