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

【问题标题】：Mui datatables support nested array from API?Mui 数据表支持来自 API 的嵌套数组？
【发布时间】：2021-10-04 06:55:47
【问题描述】：

我想将 MUI 数据表与以下嵌套数组一起使用，该数组当前按预期工作：

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

我的 MUIDatatables 设置了正确的列：

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

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

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

<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 的数据来实现这一点，或者如何解决这个问题？

【问题讨论】：

标签： reactjs api material-ui react-table mui-datatable

【解决方案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}
/>

这行得通吗？

【讨论】：