如何在MUI X Data Grid中实现下拉选单元格更新并提交至服务器？

一、获取更新后的单元格值与行ID（无需自定义Select） #

直接利用Data Grid内置的事件和回调捕获更新，避免自定义组件带来的样式问题：

1. 通过onCellEditCommit捕获单元格更新 #

在Data Grid组件上绑定该事件，当单元格编辑完成（选择下拉选项后确认），即可获取更新的行ID、字段和新值：

<DataGrid
  rows={rows}
  columns={columns}
  onCellEditCommit={(params) => {
    const { id, field, value } = params;
    // 直接拿到核心更新信息
    console.log("行ID:", id);
    console.log("更新字段:", field);
    console.log("新值:", value);
    
    // 调用axios提交到服务器
    axios.put(`/api/your-api/${id}`, {
      [field]: value
    }).then(res => {
      // 处理成功逻辑
    }).catch(err => {
      // 处理错误逻辑
    });
  }}
  // 其他必填属性...
/>

2. 使用processRowUpdate处理整行更新 #

如果需要提交完整行数据或控制更新后的行状态，用这个回调更合适：

const processRowUpdate = async (newRow) => {
  // newRow包含更新后的完整行数据，含id和status
  try {
    const response = await axios.put(`/api/your-api/${newRow.id}`, newRow);
    return response.data; // 返回更新后的行，Data Grid会自动同步显示
  } catch (error) {
    // 提交失败时抛出错误，Data Grid会显示错误状态
    throw error;
  }
};

<DataGrid
  rows={rows}
  columns={columns}
  processRowUpdate={processRowUpdate}
  // 其他必填属性...
/>

二、自定义Select组件的样式修复（可选） #

如果确实需要自定义Select，通过editComponent结合sx样式匹配Data Grid内置组件风格：

// 修改columns中的status列配置
{
  field: "status",
  headerName: "Status",
  flex: 1,
  editable: true,
  editComponent: (params) => (
    <Select
      value={params.value}
      onChange={(e) => params.onChange(e.target.value)}
      fullWidth
      sx={{
        '& .MuiOutlinedInput-root': {
          borderRadius: 0,
          '&:hover fieldset': {
            borderColor: 'rgba(0, 0, 0, 0.23)',
          },
          '&.Mui-focused fieldset': {
            borderColor: '#1976d2',
          }
        }
      }}
    >
      <MenuItem value={1}> </MenuItem>
      <MenuItem value="Confirmed">Confirmed</MenuItem>
      <MenuItem value="Didn't answer">Didn't answer</MenuItem>
      <MenuItem value="Received">Received</MenuItem>
      <MenuItem value="Duplicated">Duplicated</MenuItem>
      <MenuItem value="Complaint">Complaint</MenuItem>
    </Select>
  ),
  renderCell: (params) => (
    <Typography variant="body2">
      {params.value === 1 ? '' : params.value}
    </Typography>
  )
}

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