Material React Table V2可编辑选择字段配置异常求助

问题原因 #

当你使用对象数组作为editSelectOptions时，Material React Table（MRT）无法自动识别要显示的选项文本、绑定的值，同时由于选项缺少唯一标识，触发了"Each child in a list should have a unique 'key' prop"警告。

解决方案 #

通过配置editSelectOptionLabel和editSelectOptionValue指定对象的显示字段与值字段，同时修正数据绑定逻辑：

{
  accessorKey: 'stateId', // 注意：若你的行数据存储的是state的id，需对应修改此字段
  header: 'State',
  editVariant: 'select',
  editSelectOptions: [{id: 1, state:"Alabama"}, {id: 2, state:"New York"}],
  // 指定选项显示的文本内容
  editSelectOptionLabel: (option) => option.state,
  // 指定选项对应的值（同时作为选项的唯一key）
  editSelectOptionValue: (option) => option.id,
  // 非编辑状态下，单元格显示对应的state名称
  cell: ({ row }) => {
    const matchedState = row.original.stateId 
      ? editSelectOptions.find(opt => opt.id === row.original.stateId)?.state
      : '';
    return matchedState;
  },
  muiEditTextFieldProps: ({ row }) => ({
    select: true,
    error: !!validationErrors?.stateId, // 对应accessorKey的错误字段
    helperText: validationErrors?.stateId,
    onChange: (event) => {
      const selectedStateId = event.target.value;
      setEditedUsers({
        ...editedUsers,
        [row.id]: { 
          ...row.original, 
          stateId: selectedStateId // 用选中的id更新数据，适配后端交互
        },
      });
    },
  }),
},

关键配置说明 #

• editSelectOptionLabel：告诉MRT每个选项要渲染的文本内容，这里指定为对象的state属性。
• editSelectOptionValue：指定选项绑定的值（即选中后获取到的event.target.value），同时MRT会用这个值作为选项的唯一key，解决key警告问题。
• cell属性：非编辑状态下，根据行数据中的stateId匹配对应的州名称显示，保证视图一致性。
• accessorKey：需与行数据中存储state标识的字段保持一致（若原数据存的是state名称，可调整为state，但建议用id和后端交互）。

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