Data grid添加更新/删除按钮触发栈溢出错误，求选行删除方案

一、解决"Maximum call stack size exceeded"错误 #

你的代码里有两个核心问题导致栈溢出：

1. 最后两个操作列重复定义了field属性（先是field:""又写field:"Print"），且两个列的field值都是Print——Data Grid要求每列的field必须唯一，重复的字段会触发组件内部无限循环渲染。
2. 操作列的field不能留空或重复，需给每个操作列分配唯一标识。

修复后的操作列代码：

const columns = [
    // 其他列保持不变
    { 
        field: "update", 
        headerName: "操作", 
        flex:1,
        renderCell: (cellValues) => {  
            return (
                <Button
                    variant="contained" 
                    color="primary" 
                    onClick={(event) => handleClick(event, cellValues, "update")}
                >  
                    Update  
                </Button>
            ) 
        } 
    },
    { 
        field: "delete", 
        flex:1,
        renderCell: (cellValues) => {  
            return (
                <Button
                    variant="contained" 
                    color="error" 
                    onClick={(event) => handleClick(event, cellValues, "delete")}
                >
                    Delete
                </Button>
            )
        }
    }
];

同步修改handleClick函数，通过第三个参数区分操作类型：

const handleClick = (event, cellValues, action) => {
    event.stopPropagation(); // 避免触发行选中事件
    const rowData = cellValues.row;
    if(action === "update"){
        // 执行更新逻辑
        console.log("更新行：", rowData);
    } else if(action === "delete"){
        // 执行删除逻辑
        console.log("删除行：", rowData);
    }
};

二、选中行删除的实现方式 #

无需按钮，可通过Data Grid的复选框选中功能实现批量删除，步骤如下：

1. 配置行选择与删除逻辑：

import { DataGrid } from '@mui/x-data-grid';
import { useState } from 'react';
import { Button } from '@mui/material';

// 假设你的数据源为rows
const [rows, setRows] = useState([/* 你的业务数据 */]);
const [selectedRows, setSelectedRows] = useState([]);

// 删除选中行的函数
const handleDeleteSelected = () => {
    const selectedIds = selectedRows.map(id => id);
    const updatedRows = rows.filter(row => !selectedIds.includes(row.id));
    setRows(updatedRows);
    setSelectedRows([]); // 清空选中状态
};

return (
    <div style={{ height: 400, width: '100%' }}>
        {/* 顶部删除按钮 */}
        <Button 
            variant="contained" 
            color="error" 
            onClick={handleDeleteSelected}
            disabled={selectedRows.length === 0}
            style={{ marginBottom: 10 }}
        >
            删除选中行
        </Button>
        <DataGrid
            rows={rows}
            columns={columns}
            checkboxSelection
            onSelectionModelChange={(newSelection) => {
                setSelectedRows(newSelection);
            }}
            selectionModel={selectedRows}
            rowId="id" // 确保行数据有唯一id字段
        />
    </div>
);

2. 关键说明：

• checkboxSelection：开启每行复选框，支持多选。
• selectionModel：存储选中行的id数组，通过onSelectionModelChange同步选中状态。
• handleDeleteSelected：通过筛选排除选中id对应的行，更新数据源完成删除。

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