如何将道具放入数组

Question

我对这段 ReactJS 代码有疑问。这是一个用 jHipser 生成的项目，这是我的新手。

所以我正在使用 <MDBDataTable striped hover bordered small data={data}/>

data 必须采用这种格式

const data = {
      columns: [
        {...}
      ],
      rows: [
        {...}
      ]
   };

我的数据是通过props收集的，并且是这样存储的

const { bookList, match } = this.props;

columns 是固定的，它们按应有的方式填充。我需要用存储在 bookList 中的数据填充 rows。关于如何做到这一点有什么想法吗？

我是 React 的新手，所以请放轻松 :)

编辑

这是一个 bookList 的例子

0:
  id: 1
  records: null
  serialNumber: "enable Gorgeous Frozen Pants"
  yearRange:
    createdAt: "2019-11-04T13:28:16Z"
    firstYear: 37454
    id: 1
    lastYear: 79654
    updatedAt: "2019-11-05T07:53:08Z"

我有更多。我通过尝试这个

更接近解决方案

rows: [
        {
          id: `${bookList.map(result => result.id)}`,
        }
      ]

但是它将 bookList 中的所有 ID 放入这个 id 中，并在 table 中将它们显示在一行中。我需要创建与 bookList 中的元素一样多的行。

Answer 1

列是 json 的数组，其中包含键字段和标签

现在您的行中应该包含以键作为列中的字段值的数据

例如如果

columns: [
  {
    label: 'Name',
    field: 'name'
  },
  {
    label: 'Position',
    field: 'position'
  }]

那么行应该像

rows: [
  {
    name: 'Tiger Nixon',
    position: 'System Architect'
  },
  {
    name: 'Garrett Winters',
    position: 'Accountant'
  }]

尝试以这种方式更改您的书单。

Answer 2

将值映射到 rows 数组而不是 id 键。

const data = {
  columns: [{...}],
  rows: bookList.map(book => (
    { id: book.id, ...add all keys you need here... }
  ) 
}

如何将道具放入数组

How to put props in array

maven

reactjs

jhipster