MUI X Data Grid更新用户状态/角色时字段值传undefined问题求助

核心问题 #

你遇到的status和role返回undefined有两个关键原因：

1. renderCell参数结构错误：MUI X Data Grid的renderCell接收的是一个params对象，而非直接的行数据。你之前用的rowData.status/rowData.role实际是在访问params对象本身的属性，而非行数据里的字段。
2. 编辑值未同步到原始行数据：Data Grid的单元格编辑默认是临时存储在组件内部状态中，不会自动修改你传入的rows数组，所以即使修正了参数结构，直接取params.row也拿不到编辑后的最新值。

快速修复方案（直接获取最新编辑值） #

修改操作列的renderCell逻辑，通过Grid API获取当前行的最新数据：

{
  headerName: "Action",
  field: "action",
  width: 100,
  renderCell: (params) => {
    // 通过API获取包含最新编辑值的行数据
    const latestRow = params.api.getRow(params.id);
    return (
      <Button 
        variant="contained" 
        color="primary" 
        onClick={() => updateStatusAndRole(latestRow.id, latestRow.status, latestRow.role)}
      >
        Save
      </Button>
    );
  },
}

进阶方案（受控模式维护行数据） #

如果需要更可控的状态管理，可以将rows维护为组件状态，监听编辑提交事件同步更新：

1. 维护行数据状态并添加编辑提交回调：

const [rows, setRows] = useState(initialUserRows);

// 监听单元格编辑完成事件，同步更新状态
const handleCellEditCommit = (params) => {
  setRows(prevRows => 
    prevRows.map(row => 
      row.id === params.id ? {...row, [params.field]: params.value} : row
    )
  );
};

2. 在DataGrid组件上绑定该回调：

<DataGrid
  rows={rows}
  columns={columns}
  onCellEditCommit={handleCellEditCommit}
  // 其他配置...
/>

3. 此时操作列的renderCell可以直接使用params.row获取最新值：

renderCell: (params) => (
  <Button 
    variant="contained" 
    color="primary" 
    onClick={() => updateStatusAndRole(params.row.id, params.row.status, params.row.role)}
  >
    Save
  </Button>
)

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