ReactJS中如何编辑循环数组对象适配react-data-table-component列要求

你只需要把通过Object.keys拿到的字符串数组，调用map方法遍历转换为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;
    // 处理空数据边界，避免数组为空时报错
    if (!data || data.length === 0) {
      return <div className="card p-4 mb-4">暂无表格数据</div>
    }
    // 取首项的键集合
    const keys = Object.keys(data[0]);
    // 转换为符合组件要求的列配置数组
    const columns = keys.map(key => ({
      name: key,
      selector: key,
      sortable: true
    }));

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

// 调整默认值为数组，和实际传入的data类型匹配
WrapperTableTile.defaultProps={
  data:[]
}

WrapperTableTile.propTypes={
  data:WrapperTableTileType
}

export default WrapperTableTile;

说明：

• 这里用map方法替代了你写的for循环逻辑，每一个字符串类型的键都会被转换为包含name、selector、sortable属性的对象，完全符合组件的入参要求
• 调整了defaultProps里的默认data为数组，和你描述的“data是JSON数组”的实际场景匹配，避免默认值类型不一致导致的报错

内容的提问来源于stack exchange，提问作者Simon Orro