如何按 ReactJS 材料表中嵌套对象中的值分组？

Posted 2023-02-22

【中文标题】如何按 ReactJS 材料表中嵌套对象中的值分组？

【英文标题】：How do I group by a value in a nested object in ReactJS material-table?

【发布时间】：2020-03-27 15:41:36

【问题描述】：

假设我有一个 people 数组，其中包含一个嵌套对象 company，我希望能够按 company.name 分组Material-Table。

const people = [ 
  name: 'John', company: name: 'Google',
  name: 'Chad', company: name: 'Google',
  name: 'Mary', company: name: '***'
]

<MaterialTable
  data=people
  columns=[
            
              title: "Company", field: "company.name", grouping: true,
              render: rowData => rowData.company.name
            ,
  ],
  options=grouping: true
/>

表格按公司名称正确排序，但如果我尝试按列分组，则会引发错误：

table-config.js 是列数组的位置

table-config.js:187 Uncaught TypeError: Cannot read property 'name' of undefined
at Object.render (table-config.js:187)
at MTableCell.getRenderValue (m-table-cell.js:94)
at MTableCell.render (m-table-cell.js:176)
at finishClassComponent (react-dom.development.js:18470)
at updateClassComponent (react-dom.development.js:18423)
at beginWork$1 (react-dom.development.js:20186)
at htmlUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)

我究竟是如何完成这项工作的？

谢谢

【参考方案1】：

您可以修改人员数组，并按公司分组

const people = [ 
  name: 'John', company: name: 'Google',
  name: 'Chad', company: name: 'Google',
  name: 'Mary', company: name: '***'
].map((value)=> 
   value.company = value.company.name
   return value
)