javascript - 如何在 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 数组，我Object.key用来仅获取第一个对象的键，将它们用作表中列的名称。

它不起作用，因为keys输出是Objectlike: {'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 keys = ['ID','NAME','AGE'].map(key=>{ name: key, selector: key, sortable: true });

Answer 2

这是我的解决方案：

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

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