Mui 数据表支持来自 API 的嵌套数组？

Question

我想将 MUI 数据table 与以下嵌套数组一起使用，目前按预期方式工作：

  {this.state.posts.map((posts,index) => (
      <>
      {posts.map((item, j) => (
      <tr key={j}>
        <td>{item.id}</td>
        <td>{item.date}</td>
      </tr>
        )
      )}
      </>
  ))}

我的 MUIDatatable 设置了正确的列：

const columns = ["ID", "Date"];

const options = {
  filterType: 'checkbox',
  enableNestedDataAccess: "."
};

然后我的 MUI table 组件可能会像这样处理数据：

<MUIDataTable
  title={"Employee List"}
  data={this.state.posts.map((posts,index) => (
    {posts.map((item,j) => {
        return [
            item.id,
            item.date,
        ]
    })}
  ))}
  columns={columns}
  options={options}
/>

但是这种语法似乎不适用于数据部分（或者根本不支持？）。任何想法如何使用直接来自嵌套数组中的 API 的数据来实现这一点，或者如何解决这个问题？

Answer 1

我认为给定你的源数据，你给 MUIDataTable data prop 一个 3 维的数组，而不是预期的 2 个。

要解决此问题，您可以尝试展平源数组以具有正常的对象集合，然后对其进行迭代。

示例：

<MUIDataTable
  title={"Employee List"}
  data={this.state.posts.flat().map(item => {
        return [
            item.id,
            item.date,
        ]
    })}
  ))}
  columns={columns}
  options={options}
/>

这样行吗？

Mui 数据表支持来自 API 的嵌套数组？

Mui datatables support nested array from API?

reactjs

api

material-ui

react-table

mui-datatable