Получение данных о состоянии в таблицу реагирует

Question

Я застрял на этом уже 2 часа и думаю, что я слишком много думаю, пожалуйста, помогите мне упростить это.Я хочу вернуть таблицу информации, которую я получаю из моего бэкэнда, пока она работает отлично, но это не таблица:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';

 class Pilot extends Component {
  render() {
  const { token, pilos } = this.props

  if(!token) return <Redirect to='/' />
  return (

  <div>
    {pilos.map(pilo => {
      return (
        <div>
          <p>{pilo.CreatedAt}</p>
          <p>{pilo.UpdatedAt}</p>
          <hr />
        </div>
      );
    })}
  </div>
)
 }
 }


 const mapStateToProps = (state) => {
return {
token: state.auth.token,
pilos: state.pilo.pilos
   }
   }

    export default connect(mapStateToProps)(Pilo)

Я использую Antd для своего дизайна, и я хочуиспользовать этот дизайн для моей таблицы.Какие-нибудь мысли?Я просто не могу получить эту информацию в виде таблицы, и это меня раздражает.

Answer 1

Так как вы не предоставили полезную нагрузку, я собираюсь продолжить с полями, которые вы предоставили.

import { Table, Divider, Tag } from 'antd';

class Pilot extends Component {
    render() {
        const {
            token,
            pilos
        } = this.props
        // assumed data from back end
        const pilos = [{
          CreatedAt: Wed Mar 20 2019 18:24:19,
          UpdatedAt: Wed Mar 20 2019 18:24:19'
        }, {
          CreatedAt: Wed Mar 20 2019 18:24:19,
          UpdatedAt: Wed Mar 20 2019 18:24:19'
        }];

        //Next you need to transform the data to the form required by the antd table
        //Here we only have to set a key value, I'm setting the array's index, but if you have a unique ID per pilot you can set it here.
        //const pilosDataForAntdTable = pilos.map((pilo,index)=> pilo.key = index);


        //This is how the Transformed data for the table will look like
        //Including the plain structure for clarity
        // You can remove this structure and uncomment the above map function
        const pilosDataForAntdTable = [{
          key: '1',
          CreatedAt: Wed Mar 20 2019 18:24:19,
          UpdatedAt: Wed Mar 20 2019 18:24:19'
        }, {
          key: '2',
          CreatedAt: Wed Mar 20 2019 18:24:19,
          UpdatedAt: Wed Mar 20 2019 18:24:19'
        }];

        // You have to define the columns here
        // It is important that you map the 'dataIndex' to the relevant field name
        // in [dataIndex: 'CreatedAt', CreatedAt: Wed Mar 20 2019 18:24:19] ==> The CreatedAt names are mapped together
        // This is how each cell is mapped to the column
        //You have to include the rest of the column names
        const columns = [{
          title: 'Created At',
          dataIndex: 'CreatedAt',
          key: 'CreatedAt',
        }, {
          title: 'Updated At',
          dataIndex: 'UpdatedAt',
          key: 'UpdatedAt',
        }];

        if (!token) return <Redirect to = '/' / >;
        return (
           <div>
               <Table dataSource={pilosDataForAntdTable} columns={columns} />
           </div>
        )
    }
}