Как передать ответ Json в пустую таблицу дизайна муравьев?

Question

Я новичок в реакции и хочу передать свой ответ json, полученный из API, в пустую таблицу ant-design, и я не понимаю, как это сделать?

У меня уже естьсопоставленный идентификатор с именем, но также нужно все остальные столбцы и в формате таблицы дизайна муравья.

JSon response

[
    {
        "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 должен оставаться уникальным для всех имен столбцов.

В вашем случае массив столбцов мог бы быть:

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