React Ag-Grid外部过滤器过滤结果滞后于输入问题求助

你的问题核心是闭包导致的state值捕获滞后，下面给你拆解原因和解决方案：

问题根源 #

你定义的doesExternalFilterPass函数在组件初始渲染时被创建，它会捕获当时的filterVal state值。当你通过选择器更新filterVal后，虽然useEffect会触发gridApi.onFilterChanged()，但此时组件还没完成重渲染，Ag-Grid调用的仍然是旧的doesExternalFilterPass函数——它里面的filterVal还是更新前的旧值。等到下一次选择时，组件重渲染生成了新的doesExternalFilterPass（捕获了上一次的filterVal），这时候触发过滤才会用上一次的规则，就出现了“慢一拍”的现象。

解决方案：用useRef跟踪最新的filter值 #

我们可以通过useRef来保存最新的filterVal，让doesExternalFilterPass始终能拿到当前最新的过滤值，避免闭包陷阱：

步骤1：创建ref并同步state值 #

import { useRef, useEffect, useState } from 'react';

// ...其他代码

const [filterVal, setFilterVal] = useState('');
const filterValRef = useRef(filterVal);

// 每次filterVal更新时，同步到ref的current属性
useEffect(() => {
  filterValRef.current = filterVal;
}, [filterVal]);

步骤2：修改doesExternalFilterPass函数 #

把原来直接使用filterVal改成引用filterValRef.current：

const doesExternalFilterPass = (node) => { 
  // 用ref获取最新的过滤值
  const currentFilter = filterValRef.current;
  switch (currentFilter) { 
    case "below25": return node.data.age < 25; 
    case "between25and50": return node.data.age >= 25 && node.data.age <= 50; 
    case "above50": return node.data.age > 50; 
    case "dateAfter2008": return asDate(node.data.date) > new Date(2008, 1, 1); 
    default: return true; 
  } 
};

步骤3：保持原有的useEffect触发过滤 #

你原来的useEffect逻辑不需要改，它会在filterVal更新时通知Ag-Grid重新执行过滤：

useEffect(() => { 
  if (!!gridApi) { 
    gridApi.onFilterChanged(); 
  } 
}, [filterVal, gridApi]);

为什么这个方案有效？ #

useRef的current属性是一个可变容器，它不会像state那样在组件重渲染时创建新的变量。doesExternalFilterPass函数每次被Ag-Grid调用时，都会直接读取filterValRef.current的最新值，完全避开了闭包捕获旧state的问题，这样过滤规则就能和你的选择实时同步了。

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