MUI DataGrid扩展操作列报错：无法读取undefined的showInMenu属性

问题根源 #

报错来自两个核心问题：

• 未给extraColActions设置默认值，当父组件未传递该props时，它会是undefined，直接调用map方法会触发渲染异常，进而引发读取showInMenu的错误
• 直接将map返回的数组嵌套进原操作列数组，形成二维数组结构，DataGrid无法正确解析，导致组件渲染失败

解决方案 #

1. 给extraColActions设置默认空数组

在ListView组件的props定义中，为extraColActions添加默认值，确保它始终是数组类型：

// ListView组件定义
const ListView = ({ extraColActions = [], ...otherProps }) => {
  // 组件内部逻辑
};

2. 展开map结果，避免二维数组

在getActions的数组中，用扩展运算符...将extraColActions.map()返回的数组展开，让所有操作项处于同一层级：

field: "manage",
headerName: "Manage",
sortable: false,
type: "actions",
getActions: (params) => [
  <GridActionsCellItem
    icon={<DeleteIcon/>}
    onClick={() => {
        setCurrent(params.row["id"])
        setDeletePopupOpen(true)
    }}
    label="Törlés"
    showInMenu={true}
    key="delete"
  />,
  <GridActionsCellItem
    icon={<EditIcon/>}
    onClick={() => {
        setCurrent(params.row["id"])
        setEditPopupOpen(true)
    }}
    label="Szerkesztés"
    showInMenu={true}
    key="edit"
  />,
  // 用扩展运算符展开map结果，消除二维数组
  ...extraColActions.map((action, index) =>
    <GridActionsCellItem
        key={`extra-${index}-${action.label}`}
        icon={action.icon}
        onClick={() => {action.onClick(params.row['id'])}}
        label={action.label}
        showInMenu={true}
    />
  )
],

3. 检查父组件props传递正确性

确认父组件（预订页面）传递extraColActions时，props名称拼写完全一致，无大小写或拼写错误：

// 父组件中传递props
<ListView 
  extraColActions={extraColActions}
  // 其他props
/>

额外提示 #

为每个GridActionsCellItem添加唯一key属性，符合React列表渲染规范，避免控制台警告。

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