AG-Grid React搜索输入时列组展开状态自动重置的问题求助

问题分析 #

搜索输入触发组件重新渲染（或行数据更新）时，AG Grid会重置列组的展开/折叠状态，核心原因是：

• 列定义（columnDefs）引用不稳定，导致AG Grid重新初始化列配置
• 未主动保存和恢复列组的展开状态，AG Grid默认不会持久化该状态

解决方案 #

1. 稳定columnDefs引用

用useMemo缓存列定义，确保组件重新渲染时引用不变，避免AG Grid重复初始化列配置：

const App = () => {
  const [searchString, setSearchString] = React.useState("");
  // 用useMemo缓存列定义，依赖项为空确保仅初始化一次
  const colDefs = React.useMemo(() => [
    // 你的列组定义示例
    {
      headerName: "Project",
      children: [
        { field: "businessUnit", headerName: "Business Unit" },
        { field: "budgetCode", headerName: "Budget Code" }
      ]
    },
    // 其他列定义...
  ], []);

  const onSearchInput = React.useCallback((e) => {
    setSearchString(e.target.value);
  }, []);

  // 后续代码...
};

2. 保存并恢复列组状态

通过AG Grid的API监听列组展开/折叠事件，保存状态；在网格初始化或行数据更新后恢复状态：

const App = () => {
  const [searchString, setSearchString] = React.useState("");
  const [columnGroupState, setColumnGroupState] = React.useState(null);
  const gridRef = React.useRef(null);

  const colDefs = React.useMemo(() => [
    // 列定义...
  ], []);

  // 模拟搜索后的行数据过滤逻辑，替换为实际API请求
  const rowData = React.useMemo(() => {
    return sample.filter(item => 
      Object.values(item).some(val => 
        val?.toString().toLowerCase().includes(searchString.toLowerCase())
      )
    );
  }, [searchString]);

  const onGridReady = React.useCallback((params) => {
    gridRef.current = params.api;
    // 恢复之前保存的列组状态
    if (columnGroupState) {
      params.api.setColumnGroupState(columnGroupState);
    }
    // 监听列组状态变化并保存
    params.api.addEventListener('columnGroupOpened', () => {
      setColumnGroupState(params.api.getColumnGroupState());
    });
  }, [columnGroupState]);

  const onSearchInput = React.useCallback((e) => {
    setSearchString(e.target.value);
  }, []);

  return (
    <div>
      <input type="text" onChange={onSearchInput} />
      <div style={{ width: "100%", height: "80vh" }} className="ag-theme-material">
        <AgGridReact
          ref={gridRef}
          columnDefs={colDefs}
          defaultColGroupDef={{ marryChildren: true }}
          defaultColDef={{
            filter: false,
            resizable: true,
            wrapHeaderText: true,
            autoHeaderHeight: true
          }}
          rowData={rowData}
          onGridReady={onGridReady}
        />
      </div>
    </div>
  );
};

关键说明 #

• 用useMemo缓存columnDefs和rowData，避免不必要的引用变化触发AG Grid重新渲染
• 通过columnGroupOpened事件捕获列组状态变化并保存到组件state
• 在onGridReady中恢复状态，确保行数据更新后列组展开状态保持不变

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