如何在ReactJS中编辑和循环数组对象

Question

在我的React项目中，我正在尝试输出表(使用react-data-table-component)。

下面是我的代码：

import React from "react";
import DataTable from "react-data-table-component";

class WrapperTableTile extends React.Component {
  render(){
    const {data} = this.props;
    const key = this.props.data[0];
    const keys = Object.keys({...key});

    return (
      <div className="card p-4 mb-4">
        <DataTable
          title=""
          columns={keys}
          data={data}
          defaultSortField="title"
          pagination
          selectableRows
          className="table myDataTable"
          highlightOnHover={true}
        />
      </div>
    )
  }
}

WrapperTableTile.defaultProps={
  data:{
    title:"",
    columns:[],
    rows:[]
  }
}

WrapperTableTile.propTypes={
  data:WrapperTableTileType
}

export default WrapperTableTile;

我的data是一个具有不同对象的JSON Array，我使用Object.key只获取第一个对象的键，将它们用作表中列的名称。

它不起作用，因为keys输出是像这样的Object：{'ID','NAME','AGE',...}而不是DataTable需要一个数组用于columns={keys}，如下所示：

{
  name: "ID",
  selector: "ID",
  sortable: true,
},
{
  name: "NAME",
  selector: "NAME",
  sortable: true,
},
{
  name: "AGE",
  selector: "AGE",
  sortable: true,
},

最后，在React中，我不知道如何做这样的事情：

for (i = 0; i < keys.length; i++) {
  {
    name: keys[i],
    selector: keys[i],
    sortable: true,
  }
}

如何编辑数组以将其用作组件中的值？

Answer 1

以下是我的解决方案：

const tblKeys = keys.map((item) => (
  {
    name: item,
    selector: item,
    sortable: true,
  }
))

然后在我的组件中：columns={tblKeys}

Answer 2

const key= 'ID'，'NAME'，‘AGE’..map(key=>{ name: key，selector: key，sortable: true })；