如何触发Material UI DataGrid的processRowUpdate实现删行并持久化到服务器

要让删除操作触发processRowUpdate回调完成服务器端持久化，你需要利用DataGrid的编辑模式切换机制——先将目标行切换到编辑状态，标记该行待删除，再触发编辑停止操作，以此触发processRowUpdate处理删除逻辑。具体实现步骤如下：

1. 初始化apiRef #

首先获取DataGrid的API引用，用于手动控制编辑模式：

import { useGridApiRef } from '@mui/x-data-grid';

const apiRef = useGridApiRef();

2. 修改删除按钮点击事件 #

不要直接从本地rows中删除行，而是先标记删除状态并触发编辑模式切换：

const handleDeleteClick = (id: GridRowId) => async () => {
  // 1. 将目标行切换到编辑模式
  setRowModesModel(prev => ({ ...prev, [id]: { mode: GridRowModes.Edit } }));
  
  // 2. 给该行添加删除标记（用_action: 'delete'作为标识）
  setRows(prev => prev.map(row => 
    row.id === id ? { ...row, _action: 'delete' } : row
  ));
  
  // 3. 停止行编辑模式，触发processRowUpdate回调
  await apiRef.current.stopRowEditMode({ id });
};

3. 在processRowUpdate中处理删除逻辑 #

在processRowUpdate里识别删除标记，调用服务器删除接口，并返回正确结果让DataGrid更新本地状态：

const processRowUpdate = async (updatedRow, originalRow) => {
  // 处理删除逻辑
  if (updatedRow._action === 'delete') {
    try {
      // 调用服务器删除接口
      await fetch(`/your-api/${updatedRow.id}`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
      });
      // 返回null告知DataGrid移除该行
      return null;
    } catch (error) {
      // 处理删除失败，抛出错误让DataGrid显示错误状态
      throw new Error('删除失败');
    }
  }

  // 保留原有行更新逻辑
  const response = await fetch('/your-api', {
    method: 'PUT',
    body: JSON.stringify(updatedRow),
    headers: { 'Content-Type': 'application/json' },
  });
  const data = await response.json();
  return data;
};

4. 配置DataGrid组件 #

确保将apiRef、processRowUpdate及错误处理属性传入DataGrid：

import { useState } from 'react';
import { DataGrid, GridRowModes, GridRowId } from '@mui/x-data-grid';

// ...其他代码

const [processRowUpdateError, setProcessRowUpdateError] = useState<any>(null);

<DataGrid
  apiRef={apiRef}
  rows={rows}
  columns={columns}
  rowModesModel={rowModesModel}
  onRowModesModelChange={setRowModesModel}
  processRowUpdate={processRowUpdate}
  processRowUpdateError={processRowUpdateError}
  onProcessRowUpdateError={setProcessRowUpdateError}
  // 其他原有属性...
/>

原理说明 #

processRowUpdate仅在停止编辑操作时触发，通过手动切换行的编辑状态、标记删除再停止编辑，能让DataGrid将其识别为一次编辑后的保存操作，从而调用processRowUpdate。在回调中处理服务器删除逻辑后，返回null可让DataGrid自动移除该行，实现本地与服务器状态同步。

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