如何在 Mui Datatables 中的另一个数组内的数组内呈现嵌套对象属性？答案

【问题标题】：How do I render a nested object's property inside an array inside another array in MuiDatatables?如何在 Mui Datatables 中的另一个数组内的数组内呈现嵌套对象属性？
【发布时间】：2020-06-18 07:58:23
【问题描述】：

data: [{
       0: {
          item: {
              attributes: [
                  {0},
                  {1},
                   2: 
                       id: 1,
                       key:"Some String",
                       value: "23423"
            ]
        }  
    }
}]


    {
            label: 'effectiveFrom',
            name: 'item.effectiveFrom',
            options: {
              filter: true,
              sort: true
            },
          },
          {
            label: 'Vendors',
            name: 'item.attributes[2].value',
            options: {
              filter: true,
              sort: true
            },
          }

上面是使用 MuiDatatables 的列及其选项，我认为使用 item.attributes[2].value 会输出字符串，但它没有

如果有人能提供帮助，将不胜感激！

【问题讨论】：

标签： reactjs typescript mui-datatable nested-object

【解决方案1】：

这样的方法可能有用吗？

{
  label: 'Vendors',
  name: 'item',
  options: {
    filter: true,
    sort: true,
    customBodyRender: (item, meta) => (<>${item.attributes[2].value}</>),
  },
}

但我认为 MuiDataTables 可能对已经扁平化的数据有软要求。

来自文档：

用于描述表格的数据。必须是包含键/值对对象的数组，其值为字符串或数字，或者字符串或数字数组（例如：数据：[{“姓名”：“乔”，“职位”：“管道工”， "Age": 30}, {"Name": "Jane", "Job Title": "Electrician", "Age": 45}] 或数据：[["Joe", "Plumber", 30], [" Jane", "Electrician", 45]]) 不支持使用任意对象作为数据，并且已弃用。考虑在自定义渲染器中使用 id 和映射到外部对象数据，例如const data = [{"Name": "Joe", "ObjectData": 123}] --> const dataToMapInCustomRender = { 123: { foo: 'bar', baz: 'qux', ... } }

在将其传递给表格之前，您始终可以自己对其进行转换。

【讨论】：

【解决方案2】：

实际工作的是，根据键选择对象，然后返回与该键关联的值


    {
                label: 'Vendors',
                name: 'item.attributes',
                options: {
                  filter: true,
                  sort: true,
                  customBodyRender: (value: any) => {
            return value.map( (val: any, key: any ) => {
              if(val.key === "Some String") {
                return <Chip label={val.value} key={key}/>;
              }
            })
          }
                },
              }

【讨论】：