React TypeScript中Ag-Grid表格及状态无法重新加载的问题咨询

核心问题分析 #

你当前的问题在于没有遵循Ag-Grid与React集成的标准数据流模式：依赖onGridReady初始化rowData后，后续更新时既没有通过React props传递新数据，也没有正确控制状态恢复的时机，导致Ag-Grid无法感知到数据变化。

具体解决方案 #

1. 改用React Props传递rowData（推荐方案）

Ag-Grid的React组件会自动监听rowData的引用变化，触发表格更新，这是最符合React数据流的方式，避免手动操作API的潜在问题。

import { AgGridReact } from 'ag-grid-react';
import { useState } from 'react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-enterprise';

const YourGridComponent = () => {
  // 将rowData设为组件state
  const [rowData, setRowData] = useState<any[]>([]);
  const [gridApi, setGridApi] = useState<any>(null);
  const [gridColumnApi, setGridColumnApi] = useState<any>(null);

  const onGridReady = (params: any) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
    // 初始化加载数据
    fetchAndLoadData();
  };

  // 统一的数据加载逻辑
  const fetchAndLoadData = async (searchParams?: any) => {
    // 根据参数请求新数据
    const newData = await yourApiCall(searchParams);
    // 创建新数组引用，确保React/Ag-Grid感知到变化
    setRowData([...newData]);
  };

  // 监听rowData变化，恢复保存的状态
  useEffect(() => {
    if (!gridApi || rowData.length === 0) return;
    
    // 恢复保存的状态：列状态、筛选模型、透视模式等
    const savedColumnState = getYourSavedColumnState();
    const savedFilterModel = getYourSavedFilterModel();
    const savedPivotMode = getYourSavedPivotMode();
    const savedToolPanelState = getYourSavedToolPanelState();

    gridColumnApi?.applyColumnState({ state: savedColumnState });
    gridApi?.setFilterModel(savedFilterModel);
    gridApi?.setPivotMode(savedPivotMode);
    if (savedToolPanelState) gridApi?.showToolPanel(savedToolPanelState);
  }, [rowData, gridApi, gridColumnApi]);

  // 搜索栏参数变化时触发数据更新
  const handleSearchParamsChange = (newParams: any) => {
    fetchAndLoadData(newParams);
  };

  // 侧边栏重新加载状态的逻辑
  const handleReloadSavedState = () => {
    fetchAndLoadData(getCurrentSearchParams());
    // 状态恢复会在useEffect中自动执行
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 600, width: '100%' }}>
      <AgGridReact
        rowData={rowData} // 通过props传递rowData
        columnDefs={yourColumnDefs}
        onGridReady={onGridReady}
        // 企业版功能配置
        enablePivot={true}
        enableGrouping={true}
        sideBar={true}
      />
    </div>
  );
};

2. 若必须使用Grid API更新rowData

如果因为某些原因要保留gridApi.setRowData的方式，需注意两点：

• 每次传递新的数组引用（不要直接修改原数组）
• 确保状态恢复在数据加载完成后执行

const reloadData = async () => {
  const newData = await yourApiCall();
  // 监听数据加载完成事件
  const onRowDataChanged = () => {
    // 恢复保存的状态
    restoreSavedState();
    // 移除监听避免重复触发
    gridApi?.removeEventListener('rowDataChanged', onRowDataChanged);
  };
  gridApi?.addEventListener('rowDataChanged', onRowDataChanged);
  // 传递新数组引用
  gridApi?.setRowData([...newData]);
};

const restoreSavedState = () => {
  const savedColumnState = getYourSavedColumnState();
  const savedFilterModel = getYourSavedFilterModel();
  const savedPivotMode = getYourSavedPivotMode();
  const savedToolPanelState = getYourSavedToolPanelState();

  gridColumnApi?.applyColumnState({ state: savedColumnState });
  gridApi?.setFilterModel(savedFilterModel);
  gridApi?.setPivotMode(savedPivotMode);
  if (savedToolPanelState) gridApi?.showToolPanel(savedToolPanelState);
};

关键注意事项 #

• 禁止直接修改原数组：Ag-Grid和React都通过浅比较数组引用来判断数据是否变化，修改原数组不会触发更新，必须返回新的数组实例（如[...newData]）。
• 状态恢复时机：必须等rowData完全加载到Ag-Grid后再恢复状态，否则会导致状态应用在旧数据上，或覆盖新数据的渲染。
• 避免重复初始化：onGridReady仅在网格首次挂载时触发，后续数据更新不要依赖这个方法，改用state更新或API调用。

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