MUI X Data Grid SingleSelect组件问题：默认选中与受控报错

一、设置默认选中项 #

singleSelect 类型列通过 field 绑定行数据属性，结合你配置的 getOptionValue: (value) => value.id，需在初始行数据中给 payment 字段赋值为目标选项的 id。

你的行数据中，attendee.pricingOptions 存在 selectedOption: true 的项，直接将该选项的 id 赋值给 payment 即可：

const rows = [
  {
     id: 1,
     // 绑定选中项的id作为默认值
     payment: 2342342342, 
     attendee: {
       id: 1234,
       pricingOptions: [
         {
           id: 2342342342,
           name: 'Credit Card',
           selectedOption: true,
         },
         {
           id: 99994,
           name: 'Cash',
           selectedOption: false,
         },
       ],
     }
  },
];

如果需要动态根据 selectedOption 自动赋值，可在初始化时批量处理：

const processedRows = rows.map(row => ({
  ...row,
  payment: row.attendee.pricingOptions.find(opt => opt.selectedOption)?.id || 0
}));

二、修复"Uncontrolled to Controlled"错误 #

该错误源于单元格初始值为 undefined，后续选中选项后变为有值，导致组件从非受控转为受控。解决核心是确保 payment 字段始终有明确初始值：

1. 初始化行数据时，给 payment 设默认值（无选中项时设为 0 或"无选项"对应的id，不能留空/undefined）
2. 列定义中补充 valueGetter 确保值的稳定性，同时修正 valueOptions 的语法错误：

const columns: GridColDef[] = [
  …
  {
    field: 'payment',
    flex: 1,
    editable: true,
    type: 'singleSelect',
    getOptionLabel: (value: any) => value.name,
    getOptionValue: (value: any) => value.id,
    // 确保返回值不为undefined
    valueGetter: (params) => params.row.payment || 0,
    valueOptions: (params: GridValueOptionsParams<TMyProps>) => {
      const options = params.row?.attendee?.pricingOptions || [];

      if (options.length === 0) {
        // 修正语法：对象需包裹在数组中
        return [{
          id: 0,
          name: 'No pricing options',
        }];
      }

      return options;
    }, 
  },
  …
];

三、验证效果 #

完成修改后：

• 双击单元格时，默认选中 payment 字段对应的选项
• 点击选项时组件保持受控状态，不再出现错误提示
• 选择后的新值会自动同步到行数据的 payment 字段

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