MUI X Data Grid删除行报错：找不到ID为#11的行

问题根源分析 #

1. 不必要的async关键字：handleDraftColumnDelete标记为async但内部无异步操作，会导致函数返回Promise，干扰状态更新的同步时机。
2. 闭包捕获旧状态：直接使用draftColumns过滤时，可能捕获组件渲染时的旧状态，快速连续操作时会出现状态不一致。
3. 行ID唯一性隐患：如果row.index存在重复值，getRowId无法正确识别唯一行，删除后DataGrid仍会尝试查找已不存在的行ID。

解决方案步骤 #

1. 移除多余的async关键字 #

删除函数无需异步标记，修正后：

const handleDraftColumnDelete = row => {
  setDraftColumns(prev => prev.filter(col => col.index !== row.index));
};

2. 使用函数式更新获取最新状态 #

改用setState的函数式更新形式，确保每次过滤都基于最新的状态，避免闭包导致的旧状态问题：

const handleDraftColumnDelete = row => {
  setDraftColumns(prevRows => prevRows.filter(rowItem => rowItem.index !== row.index));
};

3. 确保行ID的唯一性 #

检查draftColumns中每个行的index值是否唯一，这是getRowId指定的唯一标识。添加行时可使用自增ID、UUID等方式保证唯一性。

4. 验证传递的行数据正确性 #

在renderCell中添加日志，确认row.index为当前行的正确ID：

renderCell: ({ row }) => {
  console.log('当前行ID:', row.index);
  if (row.column && row.column.value && !row.column.value.isRequired) {
    // 按钮渲染逻辑
  }
}

完整修正代码 #

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import IconButton from '@mui/material/IconButton';
import DeleteSharp from '@mui/icons-material/DeleteSharp';
import Tooltip from '@mui/material/Tooltip';

const TestComponent = () => {
  const [draftColumns, setDraftColumns] = useState([]);

  const handleDraftColumnDelete = row => {
    setDraftColumns(prevRows => prevRows.filter(item => item.index !== row.index));
  };

  const columns = [
    // ... 其他列配置
    {
      field: 'actions',
      headerName: 'Actions',
      width: 130,
      headerAlign: 'center',
      align: 'center',
      renderCell: ({ row }) => {
        if (row.column && row.column.value && !row.column.value.isRequired) {
          return (
            <Tooltip title='Delete'>
              <IconButton size='small' onClick={() => handleDraftColumnDelete(row)}>
                <DeleteSharp color='error' />
              </IconButton>
            </Tooltip>
          );
        } else return <></>;
      },
    },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={draftColumns}
        getRowId={row => row.index}
        disableSelectionOnClick
      />
    </div>
  );
};

export default TestComponent;

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