如何在MuiDatatables中另一个数组中的数组中呈现嵌套对象的属性？

Question

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会输出字符串，但它没有

如果有人能帮忙，我们将不胜感激！

Answer 1

这样的东西可能有用吗？

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

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

来自文档：

用于描述表的数据。必须是一个数组，该数组包含具有字符串或数字值的键/值对的对象，或字符串或数字的数组(例如：data:[｛"Name"："Joe"、"Job Title"："Plumber"、"Age"：30｝、｛"Name:"Jane"、"JobTitle"：《Electrician》、《Age》：45｝]或data:["Joe"，《Plumber》，30]、["Jane"，"Electrician"，45]](不支持将任意对象用作数据，因此不推荐使用。考虑在自定义渲染器中使用id并映射到外部对象数据，例如const data=[｛"Name"："Joe"，"ObjectData"：123｝]->const dataToMapInCustomRender=｛123:｛foo:‘bar’，baz:‘qux’，…｝｝

在将其传递到表之前，您总是可以自己对其进行转换。

Answer 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}/>;
              }
            })
          }
                },
              }

Answer 3

只需在选项对象中添加enableNestedDataAccess: '.'，就可以使用由"."分隔的嵌套数据