MUI X Data Grid 筛选重置问题：点击操作按钮后筛选状态丢失

我使用 @mui/x-data-grid@6.14.0 展示用户列表，第一列设置了操作按钮，点击按钮会打开MUI的Tooltip组件，正常使用时功能正常。但通过GridToolbarFilterButton筛选DataGrid数据后，点击操作按钮，DataGrid会自动重置为显示全部用户列表。

相关代码 #

DataGrid组件代码：

<DataGrid
  rows={data ? data : []}
  getRowId={(row: any) => row.patientId}
  columns={columns}
  onRowClick={rowSelect}
  slots={{
    toolbar: CustomToolbar,
  }}
  initialState={{
    pagination: {
      paginationModel: { pageSize: 10, page: 0 },
    },
  }}
  pageSizeOptions={[10, 25, 50]}
  rowSpacingType='margin'
  getRowClassName={(params: any) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')}
  style={{ cursor: 'pointer' }}
/>

操作按钮点击函数：

const handleTooltipOpen=(e:any, id:number)=>{
  e.stopPropagation();
  setOpen(id);
  dispatch(getConversationGroupDetails(id))
    .unwrap()
    .then((response:any) =>{
      if(response?.status === 200){
        setGroupDetails(response.data);
      }
    });
};

解决方案 #

这个问题主要是事件冒泡未完全阻断、筛选状态未受控管理或数据源被意外覆盖导致的，可按以下步骤修复：

• 双重阻断操作按钮的事件冒泡
  仅在handleTooltipOpen中调用e.stopPropagation()可能不够，建议直接在操作按钮的onClick事件中也添加阻断逻辑，避免触发DataGrid的行点击事件：

  // 列定义中的操作按钮示例
  {
    field: 'actions',
    renderCell: (params) => (
      <Button
        onClick={(e) => {
          e.stopPropagation();
          handleTooltipOpen(e, params.row.patientId);
        }}
      >
        操作
      </Button>
    ),
  }
  

• 排查rowSelect函数的副作用
  检查onRowClick绑定的rowSelect函数，确认其中没有重置数据源、清空筛选条件的逻辑——如果该函数在触发时会重新获取全量用户数据，就会导致筛选后的列表被覆盖。

• 使用受控状态管理筛选模型
  将DataGrid的筛选状态改为受控模式，明确保存筛选条件，避免内部状态意外重置：

  import { useState } from 'react';
  
  const [filterModel, setFilterModel] = useState({});
  
  // 在DataGrid中绑定受控筛选模型
  <DataGrid
    // ...其他属性
    filterModel={filterModel}
    onFilterModelChange={setFilterModel}
  />
  

• 检查异步操作对数据源的影响
  确认dispatch(getConversationGroupDetails(id))的异步流程中，没有修改data（即DataGrid的rows数据源）的逻辑——如果该操作会更新用户列表数据，就会覆盖筛选后的结果。

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