mui-datatables如何正确使用API返回的嵌套数组作为数据源？

你当前写法不生效的核心原因是生成的data不符合MUIDatatable的格式要求：

• MUIDatatable的data属性要求接收一维数组，每个元素对应表格的一行，格式为值数组或者行对象
• 你两层嵌套map后没有做数组打平，得到的是多层嵌套数组，无法被组件识别
• 另外你配置的enableNestedDataAccess: "."仅用于处理对象类型的嵌套字段，比如行数据为{user: {id: 1}}时可以用user.id作为列名取值，不支持处理数组类型的嵌套结构

解决方法 #

只需要先把嵌套数组打平，再映射为表格要求的行格式即可，两种常用实现如下：

1. 使用flat()方法打平数组（适配ES2019+环境，写法最简洁）

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

2. 兼容低版本环境的写法：用展开运算符+concat打平数组

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

如果你的嵌套层级超过2层，可以给flat()传入对应层级参数，比如flat(2)即可打平两层嵌套数组。

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