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，并且我要在表中使用this设计。有什么想法吗？我只是无法获得将这些信息呈现为表格的形式，这很烦我。

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>
        )
    }
}

将状态数据放入表有反应

1 个答案: