React AG-Grid日期过滤器异常：清除首个时第二个消失且旧值残留

可能的问题原因 #

1. 过滤器参数引用不稳定：你的filterParams是直接定义的普通对象，若在组件内部每次渲染都会重新创建，会导致AG-Grid频繁重置过滤器组件，引发状态异常。
2. 服务端分页下过滤器状态同步错误：服务端模式下，AG-Grid不会自动持久化完整的多条件过滤器状态，若你在处理onFilterChanged时只提取了单个条件，或服务端返回数据时未正确还原多条件状态，就会出现清除第一个条件后第二个丢失、重新添加时旧值恢复的问题。
3. AG-Grid版本兼容问题：若你的AG-Grid版本与官方示例存在差异，旧版本可能存在服务端模式下多条件过滤器的状态管理bug。

解决办法 #

1. 稳定过滤器参数引用 #

将filterParams用useMemo包裹，确保组件渲染时引用不变，避免AG-Grid重复初始化过滤器：

import { useMemo } from 'react';

// 组件内部定义
const filterParams = useMemo(() => ({
  comparator: (filterLocalDateAtMidnight, cellValue) => {
    if (!cellValue) return -1;
    const dateParts = cellValue.split('/');
    const cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0])
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    return cellDate < filterLocalDateAtMidnight ? -1 : 1;
  },
}), []);

2. 正确处理服务端分页的过滤器状态 #

在onFilterChanged事件中获取完整的过滤器模型，确保传递给服务端的是包含所有条件的完整数据：

import { useCallback, useRef } from 'react';

// 保存gridApi引用
const gridApiRef = useRef(null);

const onGridReady = useCallback((params) => {
  gridApiRef.current = params.api;
}, []);

const onFilterChanged = useCallback(() => {
  const filterModel = gridApiRef.current.getFilterModel();
  // 将完整的filterModel传递给服务端请求，不要只提取单个条件
  // 这里执行服务端数据请求逻辑
}, []);

同时，在服务端数据源的getRows方法中，正确解析多条件过滤器：

const serverSideDatasource = {
  getRows: (params) => {
    const { filterModel } = params.request;
    let dateFilterConditions = null;

    if (filterModel?.date) {
      const dateFilter = filterModel.date;
      // 判断是否为多条件过滤器
      if (dateFilter.condition1 && dateFilter.condition2) {
        // 处理AND/OR多条件
        dateFilterConditions = {
          type: dateFilter.filterType, // 'AND'或'OR'
          conditions: [dateFilter.condition1, dateFilter.condition2]
        };
      } else {
        // 单条件处理
        dateFilterConditions = {
          conditions: [dateFilter]
        };
      }
    }

    // 将dateFilterConditions转换为服务端需要的查询语句
    // 发送请求并返回数据
    fetch('/your-api-endpoint', {
      method: 'POST',
      body: JSON.stringify({
        filter: dateFilterConditions,
        // 其他分页、排序参数
      })
    })
    .then(res => res.json())
    .then(data => {
      params.success({
        rowData: data.rows,
        rowCount: data.totalCount
      });
    })
    .catch(err => params.fail());
  }
};

3. 对齐AG-Grid版本 #

检查你的AG-Grid版本是否与官方示例一致，若版本较低，尝试升级到与示例相同的版本（或最新稳定版），避免旧版本的已知bug。

额外验证点 #

• 确保defaultColDef中未设置影响过滤器状态的属性，比如filterParams的全局覆盖。
• 测试客户端分页模式下是否存在相同问题，若客户端正常，则问题肯定出在服务端状态同步逻辑中。

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