如何在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输出是类似于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'，'GE'].map(key=>名称：键，选择器：键，可排序：true})；

Answer 2

这是我的解决方案：

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

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