Material UI DataGrid调用选中行处理器后复选框状态异常求助

你遇到的问题核心是DataGrid的选中状态未做受控管理：

• 调用props.handlerSelectionRow(selected)触发父组件setSelectedTableRows时，子组件会重新渲染，但DataGrid没有绑定selectionModel属性，导致每次重渲染后选中状态被重置。
• 同时因为没有维护选中ID的状态，每次触发回调时只能获取到当前点击的单个ID，而非完整的选中ID数组。

解决步骤 #

1. 父组件维护选中ID数组：不再直接存储选中行对象，先存储选中的行ID，再根据ID筛选行对象。
2. 让DataGrid成为受控组件：通过selectionModel属性绑定父组件的选中ID状态，确保重渲染时选中状态不会丢失。
3. 调整回调逻辑：在onRowSelectionModelChange中先传递选中ID给父组件，再由父组件完成行对象的筛选。

修改后的父组件代码

// 父组件中维护选中ID的状态
const [selectedRowIds, setSelectedRowIds] = useState([]);
const [selectedTableRows, setSelectedTableRows] = useState([]);

// 处理器函数：先更新选中ID，再筛选对应行对象
const handlerSelectionRow = (ids) => {
  setSelectedRowIds(ids);
  // 根据ID筛选选中行（需确保父组件可获取customers数据）
  const selectedRows = customers.filter(entry => ids.includes(entry.id_customer));
  setSelectedTableRows(selectedRows);
};

修改后的子组件DataGrid代码

<DataGrid
    localeText={itIT.components.MuiDataGrid.defaultProps.localeText}
    disableColumnMenu
    columns={ columns }
    rows={ props.orders }
    initialState={{
        pagination: {
            paginationModel: {
                pageSize: 5,
            }
        }
    }}
    pageSizeOptions={[5, 10, 25]}
    checkboxSelection
    disableRowSelectionOnClick
    // 绑定selectionModel，让组件处于受控状态
    selectionModel={props.selectedRowIds}
    onRowSelectionModelChange={(ids) => {
        // 直接传递选中ID给父组件处理器
        props.handlerSelectionRow(ids);
    }}
    onCellClick={ handleCellClick }
    getRowId={(row) => row.id_order}
    slots={{ 
        toolbar: GridToolbar 
    }}
    slotProps={{
        toolbar: {
            printOptions: { disableToolbarButton: true }
        }
    }}
/>

补充说明 #

• DataGrid的selectionModel接收的是行ID数组（与你设置的getRowId返回值对应），绑定该属性才能保证组件重渲染时选中状态不丢失。
• 若父组件无需单独存储选中ID，也可在子组件内维护选中ID状态，但推荐将状态提升至父组件，方便全局业务逻辑统一管理。

内容的提问来源于stack exchange，提问作者Dagon-n