MUI X Data Grid分页时单选按钮选中值丢失的解决方法咨询

核心原因 #

单选按钮的选中状态没有绑定到数据的唯一标识（如行ID），而是依赖临时渲染的行索引或行对象引用，分页/排序后行重新渲染，状态关联关系断裂导致丢失。

具体解决方法 #

1. 绑定行ID存储选中状态 #

• 放弃用行索引或临时行对象记录选中项，改用每行数据的唯一ID（如row.id）作为状态值，存储在组件state或全局状态中。
• 渲染单选按钮时，通过对比当前行ID与存储的选中ID，设置checked属性。
• 示例代码：

  const [selectedRowId, setSelectedRowId] = useState(null);
  
  const columns = [
    {
      field: 'radio',
      headerName: '选择',
      renderCell: ({ row }) => (
        <Radio
          checked={selectedRowId === row.id}
          onChange={() => setSelectedRowId(row.id)}
        />
      ),
    },
    // 其他列定义
  ];
  

2. 利用Data Grid内置单选模式 #

• Data Grid原生支持单选选择，无需自定义单选按钮，内置机制会自动基于行ID维护选中状态，分页/排序时不会丢失。
• 配置方式：设置rowSelection="single"关闭多选，checkboxSelection={false}隐藏默认复选框。
• 示例代码：

  <DataGrid
    rows={rows}
    columns={columns}
    rowSelection="single"
    checkboxSelection={false}
    onRowSelectionModelChange={(newSelection) => {
      // newSelection[0]即为选中行的ID
      console.log('选中行ID:', newSelection[0]);
    }}
  />
  

3. 服务器端分页/排序的状态同步 #

• 如果使用服务器端获取数据，每次分页、排序后拿到新数据时，需验证当前选中ID是否存在于新数据集中：
  • 若存在，保留选中状态；若不存在，根据业务需求清空选中状态或保留ID等待数据加载。
  • 示例逻辑：

    const handlePageChange = async (newPage) => {
      const newRows = await fetchData(newPage);
      setRows(newRows);
      // 检查选中ID是否在新数据中
      const exists = newRows.some(row => row.id === selectedRowId);
      if (!exists) setSelectedRowId(null);
    };
    

4. 避免依赖不稳定的状态关联 #

• 不要将选中状态绑定到行对象本身（如直接存selectedRow），因为分页/排序后行对象可能被重新创建，引用关系失效。
• 始终以不变的唯一ID作为状态关联的依据。

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