Question

我反应很新，想将我从api获得的json响应反馈到一个空的ant-design表中，但是我不知道该怎么做？

我已经将id与名称映射了，但还希望将所有其他列都转换为ant design的表格格式。

JSon响应

[
    {
        "id": 9685,
        "name": "Mukesh  Rai",
        "count of sub": 3,
        "count of int": 2,
        "count of po": null
    },
    {
        "id": 2085,
        "name": "Abhyudaya Singh Panwar",
        "count of sub": 1049,
        "count of int": 17,
        "count of po": 5
    },
    {
        "id": 7087,
        "name": "Amit Kumar Sharma",
        "count of sub": 363,
        "count of int": 68,
        "count of po": 10
    },
    {
        "id": 2100,
        "name": "Aditya Kumar",
        "count of sub": 724,
        "count of int": 5,
        "count of po": 1
     }
]

组件文件

  componentDidMount(){
    axios.get("http://127.0.0.1:8000/marketer_details/")
      .then(response=>{
        console.log(response)
        this.setState({posts: response.data})
      })
      .catch(error=> {
        console.log(error)
      })
    }

render() {
    const { posts } = this.state
    return(
      <div>
        List of Posts
        {
          posts.length ?
          posts.map(post => <div key = {post.id}>{post.name}</div>) : 
          null
        }
      </div>
    )

//也希望所有其他列

    render(){
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: '30%',
        ...this.getColumnSearchProps('name'),
      },
      {
        title: 'Count of Submissions',
        dataIndex: 'Count',
        key: 'sub',
        width: '20%',
        ...this.getColumnSearchProps('sub'),
      },
      {
        title: 'Count of Interviews',
        dataIndex: 'Count',
        key: 'int',
        ...this.getColumnSearchProps('int'),
      },
      {
        title: 'Count of PO',
        dataIndex: 'Count',
        key: 'po',
        ...this.getColumnSearchProps('po'),
      },
    ];
    return <Table columns={columns} dataSource={this.state.posts} />;
  }
}
}
export default App

我无法理解如何针对每个列行进行多重映射。

Answer 1

Table组件采用列结构作为参数。

在这里，dataIndex指的是要为该列引用的数据中的索引，key旨在在各列名之间保持唯一。

在您的情况下，columns数组可以是：

const columns = [
    {
      name: "Name",
      dataIndex: "name"
    },
    {
      name: "Count of submissions",
      dataIndex: "count of sub"
    },
    {
      name: "Count of interviews",
      dataIndex: "count of int"
    },
    {
      name: "Count of PO",
      dataIndex: "count of po"
    }
  ];

Codesandbox Demo

如何将Json响应输入到Empty ant设计表中？

1 个答案: