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

Mui datatables support nested array from API?

我想将 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 的数据来实现这一点,或者如何解决这个问题?

我认为给定你的源数据,你给 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}
/>

这样行吗?