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

Question

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

const people = [ 
  {name: 'John', company: {name: 'Google'}},
  {name: 'Chad', company: {name: 'Google'}},
  {name: 'Mary', company: {name: 'StackOverflow'}
]

<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)

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

谢谢

Answer 1

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

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