通过 Object.keys 循环时，我的 ArrayList 显示为空

Question

我正在尝试使用 react 创建简单表。我正在导入 CustomerList，然后循环遍历所有 Object.keys 以首先获取表标题，然后获取正文部分。当控制台登录时，我可以看到我所有的customerList属性都在那里，但是当 console.loging Object.keys 时它显示“未定义”，我不明白我在哪里犯了愚蠢的错误。对于我能得到的所有帮助，我将不胜感激。提前致谢！我试过谷歌和 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.jsimport 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>        // )        })

Answer 1

我认为您的逻辑过于复杂，但您的代码似乎有效。

只在你的 map 函数中返回一些东西将标题添加到组件中：

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>