Мой ArrayList показывает пустой при цикле через Object.keys

Question

Я пытаюсь создать простую таблицу с реагированием. Я импортирую CustomerList, а затем перебираю все Object.keys, чтобы сначала получить заголовок таблицы, а затем часть тела. При ведении журнала консоли я вижу все свои свойства customerList , но когда console.loging Object.keys показывает «undefined», я не понимаю, где я делаю глупостиошибка. Буду благодарен за всю помощь, которую я могу получить. Заранее спасибо!

Я пробовал 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: ""
    }, {
        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: ""
    }
];

class CustomerListTable extends React.Component {
    state = {
        customerList: CustomerList
    }
    
    headerTitle = Object.keys(this.state.customerList[0]).map((header) => {
        return (<li key={header}>{header}</li>)
    })

    render() {
        return (<div>
            <h1>Customer table....</h1>
            <div>

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

                        </tr>
                    </thead>

                    <tbody></tbody>
                </table>

            </div>

        </div>);
    }
}

ReactDOM.render(<CustomerListTable/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

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>