通过 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.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>

        // )    

    })

Answer 1

我认为您的逻辑过于复杂，但您的代码似乎有效。只在你的 map 函数中返回一些东西将标题添加到组件中：const CustomerList = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: "Anny Larsson",&nbsp; &nbsp; &nbsp; &nbsp; age: 23,&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; title: "Title1",&nbsp; &nbsp; &nbsp; &nbsp; accountNumber: "12345",&nbsp; &nbsp; &nbsp; &nbsp; address: "Stockholm 14, Stockholm Sweden",&nbsp; &nbsp; &nbsp; &nbsp; hobbyList: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "coding", "writing", "reading", "skiing"&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; emptyColumn: ""&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; name: "Helena hel",&nbsp; &nbsp; &nbsp; &nbsp; age: 20,&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; title: "Title2",&nbsp; &nbsp; &nbsp; &nbsp; accountNumber: "22245",&nbsp; &nbsp; &nbsp; &nbsp; address: "Stockholm City, Stockholm Sweden",&nbsp; &nbsp; &nbsp; &nbsp; hobbyList: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "coding", "Cooking", "games", "skiing"&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; emptyColumn: ""&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; name: "Ayesha AAA",&nbsp; &nbsp; &nbsp; &nbsp; age: 25,&nbsp; &nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; &nbsp; title: "Title3",&nbsp; &nbsp; &nbsp; &nbsp; accountNumber: "09845",&nbsp; &nbsp; &nbsp; &nbsp; address: "Stockholm 21, Stockholm Sweden",&nbsp; &nbsp; &nbsp; &nbsp; hobbyList: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "coding", "Cooking", "games", "skiing"&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; emptyColumn: ""&nbsp; &nbsp; }];class CustomerListTable extends React.Component {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; customerList: CustomerList&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; headerTitle = Object.keys(this.state.customerList[0]).map((header) => {&nbsp; &nbsp; &nbsp; &nbsp; return (<li key={header}>{header}</li>)&nbsp; &nbsp; })&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Customer table....</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>{this.headerTitle}</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody></tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>);&nbsp; &nbsp; }}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 = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: "Anny Larsson",&nbsp; &nbsp; &nbsp; &nbsp; age: 23,&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; title: "Title1",&nbsp; &nbsp; &nbsp; &nbsp; accountNumber: "12345",&nbsp; &nbsp; &nbsp; &nbsp; address: "Stockholm 14, Stockholm Sweden",&nbsp; &nbsp; &nbsp; &nbsp; hobbyList:["coding", "writing", "reading", "skiing"],&nbsp; &nbsp; &nbsp; &nbsp; emptyColumn: ""&nbsp; &nbsp; }];const headerTitle = Object.keys(customerList[0]).map((header , index) => header)console.log(headerTitle)在Thead Table，映射headerTitle创建动态th：<thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;this.headerTitle.map((item, index) => <th key={index}>{item}</th>)&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; </tr></thead>