如何获取MUI Datagrid中Rating列的所有编辑值并保存至数据库

要实现更新评分后保存所有记录的需求，核心是监听DataGrid的编辑状态变化，收集修改后的行数据，再批量提交到数据库，具体步骤如下：

• 配置可编辑的Rating列
  先将Rating列设置为可编辑状态，指定编辑组件为MUI的Rating组件，同时渲染单元格时显示只读的评分：

  const columns = [
    // 其他列配置
    {
      field: 'rating',
      headerName: '评分',
      editable: true,
      editComponent: (params) => (
        <Rating
          value={params.value}
          onChange={(event, newValue) => params.onChange(newValue)}
        />
      ),
      renderCell: (params) => <Rating value={params.value} readOnly />,
    },
  ];
  

• 跟踪所有修改的行数据
  维护一个状态变量存储所有被修改过的行，通过onCellEditCommit事件捕获每一次评分修改并更新这个状态：

  const [updatedRows, setUpdatedRows] = useState([]);
  
  const handleCellEditCommit = (params) => {
    const existingRowIndex = updatedRows.findIndex(row => row.id === params.id);
    if (existingRowIndex !== -1) {
      // 更新已存在的修改行
      const updatedList = [...updatedRows];
      updatedList[existingRowIndex] = { ...updatedList[existingRowIndex], [params.field]: params.value };
      setUpdatedRows(updatedList);
    } else {
      // 添加新的修改行
      setUpdatedRows(prev => [...prev, { ...params.row, [params.field]: params.value }]);
    }
  };
  
  // 在DataGrid中绑定事件
  <DataGrid
    rows={rows}
    columns={columns}
    onCellEditCommit={handleCellEditCommit}
    // 其他必要配置
  />
  

• 批量提交到数据库
  添加保存按钮，点击时将收集到的修改行数据批量发送到后端接口：

  const handleSaveAll = async () => {
    try {
      await fetch('/api/batch-save-ratings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedRows),
      });
      // 保存成功后重置修改记录
      setUpdatedRows([]);
      // 可添加成功提示或刷新表格数据
    } catch (error) {
      console.error('保存失败:', error);
      // 处理错误逻辑
    }
  };
  
  // 页面中渲染保存按钮
  <Button onClick={handleSaveAll} variant="contained">保存所有评分</Button>
  

• 可选：用行编辑模式处理
  如果使用行编辑模式，可通过processRowUpdate事件捕获整行修改并积累记录：

  const processRowUpdate = (newRow) => {
    setUpdatedRows(prev => [...prev, newRow]);
    return newRow;
  };
  
  <DataGrid
    rows={rows}
    columns={columns}
    processRowUpdate={processRowUpdate}
    editMode="row"
    // 其他配置
  />
  

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