如何让 Material-UI DataGrid valueGetter 从数组中不同的 object 读取数据？

Question

我正在为 Woocommerce 开发 React 管理页面。我想从特定的 object（名称为“Farbe”的产品属性）检索“选项”值以显示在 MUI DataGrid 中。 我认为 valueGetter 是正确的方法，但无法让它发挥作用。

这是我所拥有的：

Woocommerce Product（行记录）：

    {
       "id": 232,
       "date_created": "2022-08-14T08:02:18",
       ...
       "attributes": [
          {
             "id": 0,
             "name": "Farbe",
             "option": "0045"
          },
          {
             "id": 1,
             "name": "Material",
             "option": "Cotton"
          },
          ...
       ],
       ...
    }

DataGrid 列：我正在尝试 select object 在键“名称”上具有值“Farbe”并访问属性“选项”的值

export const VariationColumns  = [
    { field: 'id',   headerName: 'Id',   type: 'int', width: 100},
    { field: 'sku',  headerName: 'SKU',  type: 'string', width: 200},
    { field: 'name', headerName: 'Name', type: 'string', width: 500, 
       valueGetter: ( params ) => { return params.row.attributes[name =>'Farbe'].option }},
]

但它找不到“选项”属性： “TypeError：无法读取未定义的属性（读取“选项”）”

还尝试过：

valueGetter: ( params ) => { return params.row.attributes[name =>'Farbe'].option.value
valueGetter: ( params ) => { return params.row.attributes.name['Farbe'].option
valueGetter: ( params ) => { return params.row.attributes.name['Farbe'].option.value

是否可能需要一种完全不同的方法来实现这一目标？ 非常感谢任何提示

Answer 1

假设你的rows道具看起来像你上面提供的记录，你会得到这样的：

const rows = [
    {
      id: 232,
      date_created: "2022-08-14T08:02:18",
      attributes: [
        {
          id: 0,
          name: "Farbe",
          option: "0045",
        },
        {
          id: 1,
          name: "Material",
          option: "Cotton",
        },
      ],
    },
  ];

const variationColumns = [
    { field: "id", headerName: "Id", type: "int", width: 100 },
    { field: "sku", headerName: "SKU", type: "string", width: 200 },
    {
      field: "attributes",
      headerName: "Name",
      type: "string",
      width: 500,
      valueGetter: (params) => {
        return params.value.find((item) => item.name === "Farbe").option;
      },
    },
  ];

关键点是：

1. valueGetter参数是单元格参数与行参数
2. 列中的field属性需要与rows中的字段匹配，因此如果要获取attributes ，则需要在列中包含field: "attributes" 。
3. 您可以使用params.value.find((item) => item.name === "Farbe").option)返回数组中与所需搜索字符串匹配的 object，然后访问其option属性。