React中MUI DataGrid选择模型预选行后无法修改选中状态求助

排查修复方案 #

1. 必须使用受控选择模式 #

要让React状态与DataGrid的选中状态同步，需同时配置selectionModel和onSelectionModelChange属性，且状态更新必须采用不可变操作（不能直接修改原数组，需返回新数组）。

示例代码：

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

const MyDataGrid = ({ rows, columns }) => {
  const [selectionModel, setSelectionModel] = useState([]);

  // 初始化预选前10条非禁用行
  useEffect(() => {
    const preSelectedIds = rows
      .filter(row => !row.isDisabled)
      .slice(0, 10)
      .map(row => row.id);
    // 用扩展运算符生成新数组，触发状态更新
    setSelectionModel([...preSelectedIds]);
  }, [rows]);

  const handleSelectionChange = (newSelection) => {
    // 以不可变方式更新状态
    setSelectionModel([...newSelection]);
  };

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      selectionModel={selectionModel}
      onSelectionModelChange={handleSelectionChange}
      // 开启多选模式
      checkboxSelection
      disableRowSelectionOnClick={false}
    />
  );
};

2. 检查行id的唯一性与稳定性 #

DataGrid依赖行的id跟踪选中状态，如果行的id每次渲染都变化（比如用Math.random()生成），组件无法正确关联选中状态。需确保每个行的id是固定的唯一值，例如后端返回的主键。

3. 禁止直接修改原selectionModel数组 #

React状态更新识别的是“新引用”，若直接修改原数组（如selectionModel.push(id)），React无法检测到状态变化，也就不会触发UI重渲染。必须返回新数组，比如用[...newSelection]或Array.from(newSelection)。

4. 排查是否存在禁用选择的属性 #

检查是否设置了disableSelectionOnClick、disableRowSelection这类阻止选择的属性。如果行数据包含isDisabled字段，需通过isRowSelectable明确指定可选择的行：

<DataGrid
  // ...其他配置
  isRowSelectable={(params) => !params.row.isDisabled}
/>

5. 确认DataGrid版本兼容性 #

不同版本的Material-UI X DataGrid选择模型API存在差异，若使用旧版本，建议升级到v6及以上的稳定版，新版本的选择逻辑更可靠。

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