AG Grid React 30.1.0切换组件后筛选排序状态丢失求助

问题背景 #

通过isMainVisible状态条件渲染Dashboard（包含AgGridTable）和详情页，切换到详情页时AgGridTable被卸载，切回时重渲染导致原有筛选、排序状态丢失；且当前使用的30.1.0版本无onUpdateState、initialState属性，api.getFilterModel()还会返回undefined。

解决方案 #

1. 优先选择：避免组件卸载，用样式控制显示隐藏

直接卸载组件会丢失所有实例状态，改用display样式控制显示/隐藏，保留组件实例的同时，状态自然得以保留：

// dashboard.js
<div>
  {/* 用display控制显示，而非卸载AgGridTable */}
  <div style={{ display: isMainVisible ? 'block' : 'none' }}>
    <AgGridTable />
  </div>

  {/* 详情页同样用样式控制 */}
  <div style={{ display: !isMainVisible ? 'block' : 'none' }}>
    <DetaildDashboard />
  </div>
</div>

2. 必须卸载组件时：手动保存与恢复状态

如果业务场景要求必须卸载AgGridTable，可通过以下方式手动管理状态：

• 用api.getSortModel()获取排序状态
• 用columnApi.getColumnState()获取包含筛选配置的列状态（替代返回undefined的getFilterModel()）
• 在父组件保存状态，重新渲染时传递给AgGridTable并恢复

示例代码：

// dashboard.js
import { useState } from 'react';
import AgGridTable from './AgGridTable';
import DetaildDashboard from './DetaildDashboard';

const Dashboard = () => {
  const [isMainVisible, setIsMainVisible] = useState(true);
  const [savedSortState, setSavedSortState] = useState([]);
  const [savedColumnState, setSavedColumnState] = useState([]);

  // 保存网格状态
  const saveGridState = (api, columnApi) => {
    setSavedSortState(api.getSortModel());
    setSavedColumnState(columnApi.getColumnState());
  };

  // 恢复网格状态
  const restoreGridState = (api, columnApi) => {
    if (savedSortState.length) api.setSortModel(savedSortState);
    if (savedColumnState.length) columnApi.setColumnState(savedColumnState);
  };

  return (
    <div>
      {isMainVisible && (
        <AgGridTable
          onGridReady={restoreGridState}
          onGridPreDestroy={saveGridState}
        />
      )}
      {!isMainVisible && <DetaildDashboard onBack={() => setIsMainVisible(true)} />}
    </div>
  );
};

// AgGridTable.js
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const AgGridTable = ({ onGridReady, onGridPreDestroy }) => {
  const handleGridReady = (params) => {
    onGridReady(params.api, params.columnApi);
  };

  const handleGridPreDestroy = (params) => {
    onGridPreDestroy(params.api, params.columnApi);
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <AgGridReact
        // 你的列定义和数据配置
        columnDefs={[/* 你的列配置 */]}
        rowData={[/* 你的数据 */]}
        onGridReady={handleGridReady}
        onGridPreDestroy={handleGridPreDestroy}
      />
    </div>
  );
};

3. 解决getFilterModel()返回undefined的问题

确保在网格数据完全渲染后调用状态获取方法，比如在onFirstDataRendered回调中执行，避免因网格未就绪导致的undefined：

<AgGridReact
  // 其他配置
  onFirstDataRendered={(params) => {
    const filterModel = params.api.getFilterModel();
    if (filterModel) {
      // 此时可正常获取筛选模型
      console.log('筛选模型:', filterModel);
    }
  }}
/>

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