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

Question

在我的 React 项目中，我试图输出一个 table（使用 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 只获取第一个对象的键，将它们用作 table.

它不起作用，因为 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 keys = ['ID','NAME','AGE'].map(key=>{ 名称：钥匙，选择器：键，可排序：真 });

Answer 2

这是我的解决方案：

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

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

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

How to edit and loop an Array Object in ReactJS

javascript

datatables

reactjs

react-data-table-component