javascript - 在 JSX 中映射循环以在 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

表格数据.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": "trishahubbard@geekmosis.com",
  "phone": "+1 (816) 499-3746"
},
{
  "_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": "augustagarrison@zaggles.com",
  "phone": "+1 (901) 596-3999"
},
{
  "_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": "ebonymorales@realysis.com",
  "phone": "+1 (860) 441-3757"
},
{
  "_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": "sullivanstanley@overplex.com",
  "phone": "+1 (821) 552-3375"
},
{
  "_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": "anthonysaunders@gonkle.com",
  "phone": "+1 (942) 509-3515"
},
{
  "_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": "kenyareynolds@cincyr.com",
  "phone": "+1 (869) 470-3907"
},
{
  "_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": "beckycarter@zanymax.com",
  "phone": "+1 (973) 444-3386"
}
]

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];
}