javascript - 循环遍历 Object.keys 时，我的 ArrayList 显示为空

Question

我正在尝试使用react创建简单表。我正在导入CustomerList，然后循环遍历所有Object.keys以首先获取表头，然后获取正文部分。当控制台日志记录时，我可以看到我的所有 customerList 属性都在那里，但是当 console.loging Object.keys 时，它显示“未定义”，我不明白我在哪里愚蠢的错误。我将感谢我能得到的所有帮助。提前致谢!

我尝试过 Google 和 YouTube，但没有得到我正在寻找的答案

export const customerList = [
    {
        name: "Anny Larsson",
        age: 23,
        id: 1,
        title: "Title1",
        accountNumber: "12345",
        address: "Stockholm 14, Stockholm Sweden",
        hobbyList:["coding", "writing", "reading", "skiing"],
        emptyColumn: ""
    },
    {
        name: "Helena hel",
        age: 20,
        id:2,
        title: "Title2",
        accountNumber: "22245",
        address: "Stockholm City, Stockholm Sweden",
        hobbyList:["coding", "Cooking", "games", "skiing"],
        emptyColumn: ""

    },
    {
        name: "Ayesha AAA",
        age: 25,
        id: 3,
        title: "Title3",
        accountNumber: "09845",
        address: "Stockholm 21, Stockholm Sweden",
        hobbyList:["coding", "Cooking", "games", "skiing"],
        emptyColumn: ""
    },
   //more list goes here......
     // ...............
];

export default customerList;

// My customerListTable.js

import React, { Component } from 'react';   
import CustomerList from './CustomerList';
import CustomerTitle from './CustomerTitle';



class CustomerListTable extends Component {
        state = { 
            customerList: CustomerList 
         }

    componentDidMount(){
        this.setState({
            customerList: [...this.state.customerList] //copying the list
        })
    };


    headerTitle = Object.keys(this.state.customerList[0]).map((header , index) => {
        console.log("columnHeaderTitles ", this.headerTitle )
        // return (
        //     <li>{header}</li>
        // )    
    })

    render() { 

        console.log("customer list", this.state.customerList)
        console.log("table header", this. headerTitle);

        return ( 
            <div>
                <h1>Customer table....</h1>
                <div> 
                 <CustomerTitle />

                 <table>
                     <thead>
                         <tr>
                            <th>{this.headerTitle}</th>

                         </tr>
                     </thead>


                     <tbody>

                     </tbody>
                 </table>

                </div>

            </div>
         );
    }
}

export default CustomerListTable;

Answer 1

const customerList = [
    {
        name: "Anny Larsson",
        age: 23,
        id: 1,
        title: "Title1",
        accountNumber: "12345",
        address: "Stockholm 14, Stockholm Sweden",
        hobbyList:["coding", "writing", "reading", "skiing"],
        emptyColumn: ""
    }
];
const headerTitle = Object.keys(customerList[0]).map((header , index) => header)
console.log(headerTitle)

在Thead Table中，映射headerTitle以创建动态th:

<thead>
    <tr>
    {
       this.headerTitle.map((item, index) => <th key={index}>{item}</th>)        
    }
    </tr>
</thead>