JSX中的Map循环在React中生成动态表头

Question

我正在尝试生成动态表头。我有一个tableHeader状态，它是一个数组，其中包含表所需要的所有各种标头。我已注释掉控制台日志下的输出，以便您可以看到结构。当我在JSX中遍历表以为数组中的每个元素返回一个cannot read property 'map' of undefined时，为什么会得到<TableHeader>。

import React, {Component, Fragment} from 'react'
import styled, {ThemeProvider, css } from 'styled-components'
import tableData from '../../Data/TableData'

const TableWrapper = styled.div `
    overflow-x: scroll;
    margin: 20px 0;
`

const TableContainer = styled.table`
    height:auto;
    width: 100%;
`
const TableRow = styled.tr`
    background-color: #ccc;
    &:nth-child(even){
        background: red;
    }
`
const TableHeader = styled.th`
    font-size: 20px;
`
const TableCell = styled.td `
    font-size: 14px;
    padding: 10px;
`
class Table extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            tableHeader: this.getHeader()
        }
    }

    getHeader() {
        let tableHeader = [];
        tableData.map((item, key) =>
            tableHeader.push(Object.keys(item))
        );
        tableHeader.splice(1);
        return tableHeader;
    }

    render() {
        console.log(this.state.tableHeader);
        // Array(13)]
        //     0: Array(13)
        //     0: "_id"
        //     1: "index"
        //     2: "guid"
        //     3: "isActive"
        //     4: "balance"
        //     5: "picture"
        //     6: "age"
        //     7: "eyeColor"
        //     8: "name"
        //     9: "gender"
        //     10: "company"
        //     11: "email"
        //     12: "phone"
        return(
            <TableWrapper>
                <TableContainer>
                    <TableRow>
                        {this.state.tableHeader.items.map((item, index) => (
                            <TableHeader key={index}>{item}</TableHeader>
                        ))} 
                    </TableRow>
                    <TableRow>
                        <TableCell>Jill</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell>Eve</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell>Eve</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell>Eve</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                </TableContainer>
            </TableWrapper>
        )
    }

}

export default Table

tableData.js

const tableData = [
{
  "_id": "5dc24ef327e457952f855187",
  "index": 0,
  "guid": "f260f5e0-31a3-40ce-af20-112f84b53c9b",
  "isActive": false,
  "balance": "$1,535.45",
  "picture": "http://placehold.it/32x32",
  "age": 37,
  "eyeColor": "blue",
  "name": "Trisha Hubbard",
  "gender": "female",
  "company": "GEEKMOSIS",
  "email": "[email protected]",
  "phone": "[phone]"
},
{
  "_id": "5dc24ef3c4623fd3c48b9b5d",
  "index": 1,
  "guid": "60818df4-942e-4a54-b220-9e3d3b478329",
  "isActive": true,
  "balance": "$3,295.32",
  "picture": "http://placehold.it/32x32",
  "age": 36,
  "eyeColor": "green",
  "name": "Augusta Garrison",
  "gender": "female",
  "company": "ZAGGLES",
  "email": "[email protected]",
  "phone": "[phone]"
},
{
  "_id": "5dc24ef304c623dd70274902",
  "index": 2,
  "guid": "620c1194-7c5f-4098-8a99-ba6d9a7f353e",
  "isActive": true,
  "balance": "$1,248.53",
  "picture": "http://placehold.it/32x32",
  "age": 37,
  "eyeColor": "green",
  "name": "Ebony Morales",
  "gender": "female",
  "company": "REALYSIS",
  "email": "[email protected]",
  "phone": "[phone]"
},
{
  "_id": "5dc24ef3ec1d0af18b532e23",
  "index": 3,
  "guid": "3d177090-79a3-4568-a05f-4936f6efd189",
  "isActive": true,
  "balance": "$1,929.51",
  "picture": "http://placehold.it/32x32",
  "age": 37,
  "eyeColor": "blue",
  "name": "Sullivan Stanley",
  "gender": "male",
  "company": "OVERPLEX",
  "email": "[email protected]",
  "phone": "[phone]"
},
{
  "_id": "5dc24ef3a93531da7d213398",
  "index": 4,
  "guid": "7e06af9e-0889-4471-ada6-a02d58e540c1",
  "isActive": false,
  "balance": "$1,237.16",
  "picture": "http://placehold.it/32x32",
  "age": 24,
  "eyeColor": "green",
  "name": "Anthony Saunders",
  "gender": "male",
  "company": "GONKLE",
  "email": "[email protected]",
  "phone": "[phone]"
},
{
  "_id": "5dc24ef3947391fc096af389",
  "index": 5,
  "guid": "d4cd76c8-45d8-44b6-a3d4-73c3f3cdc589",
  "isActive": false,
  "balance": "$2,672.64",
  "picture": "http://placehold.it/32x32",
  "age": 20,
  "eyeColor": "green",
  "name": "Kenya Reynolds",
  "gender": "female",
  "company": "CINCYR",
  "email": "[email protected]",
  "phone": "[phone]"
},
{
  "_id": "5dc24ef3ad9affae7772bb23",
  "index": 6,
  "guid": "585faf0e-9758-4f6a-b123-6f4acd350688",
  "isActive": false,
  "balance": "$3,203.46",
  "picture": "http://placehold.it/32x32",
  "age": 27,
  "eyeColor": "blue",
  "name": "Becky Carter",
  "gender": "female",
  "company": "ZANYMAX",
  "email": "[email protected]",
  "phone": "[phone]"
}
]

export default tableData;

Answer 1

从this.state.tableHeader.items.map中删除.items迭代

喜欢这个：

<TableRow>
  {this.state.tableHeader.map((item, index) => (
  <TableHeader key={index}>{item}</TableHeader>
))}

编辑

[您需要修复getHeader()函数，以便以后在动态加载时使用它们：

getHeader() {
  let tableHeader = [];
  tableData.map((item, key) => tableHeader.push(Object.keys(item)));
  return tableHeader[0];
}