如何在MUI X Data Grid嵌套数据中展示并编辑下拉组件？

我正在使用DataGrid from "@mui/x-data-grid"，需要将嵌套JSON对象中的Region字段以下拉选择框（值为id，显示文本为regionName）的形式展示并支持编辑，用户可从下拉菜单选择选项。

原始JSON数据示例：

{
  "id": 2,
  "cityName": "Valengo",
  "zip": 30179,
  "region": {
    "id": 1,
    "regionName": "New-Yourk"
  }
}

我的列定义如下：

const columns = [
  // 其他列...
  {
    field: "region",
    headerName: "RegionName",
    type: "singleSelect",
    editable: true,
    renderCell: (params) => {
      <DropDownRegion>{params.row.region.regionName}</DropDownRegion>;
    }
  },
];

可选的区域选项：

我尝试了以下代码，能正常显示regionName，但看不到下拉框，也无法编辑：

const columns = [
  // 其他列...
  {
    field: "region",
    headerName: "RegionName",
    type: "singleSelect",
    editable: true,
    renderCell: (params) => {
      return (
        <DropDownRegion
          regionID={
            typeof params.row.region.id !== "undefined"
              ? params.row.region.id
              : 0
          }
        >
          {params.row.region.regionName}
        </DropDownRegion>
      );
    }
  },
];

问题出在未正确配置singleSelect的选项映射，且自定义renderCell覆盖了默认的编辑触发逻辑。以下两种方案可解决：

方案一：用DataGrid内置singleSelect实现 #

无需自定义下拉组件，直接利用内置配置处理嵌套字段：

// 定义区域选项数组
const regionOptions = [
  { value: 1, label: 'New-Yourk' },
  { value: 2, label: 'San-Fransisco' },
];

const columns = [
  // 其他列...
  {
    field: "region.id", // 绑定嵌套的id字段
    headerName: "RegionName",
    type: "singleSelect",
    editable: true,
    valueOptions: regionOptions,
    // 自定义显示文本
    renderCell: (params) => params.row.region.regionName,
    // 编辑后同步整个region对象
    valueSetter: (params) => {
      const selectedRegion = regionOptions.find(opt => opt.value === params.value);
      params.row.region = {
        id: params.value,
        regionName: selectedRegion?.label || ''
      };
      return true;
    }
  },
];

方案二：自定义编辑组件（使用你的DropDownRegion） #

若必须用自定义下拉组件，需配置editComponent触发编辑模式：

// 先定义区域选项数组
const regionOptions = [
  { value: 1, label: 'New-Yourk' },
  { value: 2, label: 'San-Fransisco' },
];

const columns = [
  // 其他列...
  {
    field: "region",
    headerName: "RegionName",
    editable: true,
    // 普通模式显示文本
    renderCell: (params) => params.row.region.regionName,
    // 编辑模式渲染自定义下拉
    editComponent: (params) => {
      return (
        <DropDownRegion
          regionID={params.value.id || 0}
          onChange={(selectedId) => {
            const selectedRegion = regionOptions.find(opt => opt.value === selectedId);
            // 同步选中的区域对象到行数据
            params.onChange({
              id: selectedId,
              regionName: selectedRegion?.label || ''
            });
          }}
        />
      );
    }
  },
];

注意：确保你的DropDownRegion组件支持onChange回调，能返回选中的区域id。

内容的提问来源于stack exchange，提问作者Technology 2023