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

【问题标题】：How to edit and loop an Array Object in ReactJS如何在 ReactJS 中编辑和循环数组对象
【发布时间】：2021-11-18 14:03:05
【问题描述】：

在我的 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 输出是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,
  }
}

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

【问题讨论】：

{'ID','NAME','AGE',...} 不是 JSON
@testing_22 data 是一个 JSON，你指的输出是这样的：keys = Object.keys({...key});

标签： javascript reactjs datatables react-data-table-component

【解决方案1】：

const keys = ['ID','NAME','AGE'].map(key=>{ 名称：钥匙，选择器：键，可排序：真 });

【讨论】：

【解决方案2】：

这是我的解决方案：

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

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

【讨论】：