Ag-Grid 外部过滤器不适用于道具答案

【问题标题】：Ag-Grid External Filter not working with propsAg-Grid 外部过滤器不适用于道具
【发布时间】：2020-11-19 09:45:18
【问题描述】：

我正在尝试从我的网格组件外部设置一个外部过滤器，但 isExternalFilterPresent 方法缺少传递的属性值并且仍然未定义。我用 plunkr 创建了一个例子：https://plnkr.co/edit/PkksNSLPlianNXsz

我的错误在哪里？

  useEffect(()=> {
    if (gridApi)  {
      gridApi.onFilterChanged();
    }
 }, [props.filter])

...
  const isExternalFilterPresent = () => {
    return props.filter != 'everyone';
  };

  const doesExternalFilterPass = node => {
    switch (props.filter) {
      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;
    }
  };

...
return <AgGridReact
          modules={modules}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          animateRows={true}
          isExternalFilterPresent={isExternalFilterPresent}
          doesExternalFilterPass={doesExternalFilterPass}
          onGridReady={onGridReady}
          rowData={rowData} />

【问题讨论】：

标签： reactjs filter ag-grid

【解决方案1】：

使用 Ref 解决了这个问题。 AgGrid 似乎保留了 isExternalFilterPresent 的初始值。

  const [gridApi, setGridApi] = useState();
  const [gridColumnApi, setGridColumnApi] = useState();
   const [rowData, setRowData] = useState([]);
   const ref = useRef(props.filter);
  
  useEffect(()=> {
    if (gridApi)  {
      ref.current = props.filter;
      gridApi.onFilterChanged();
    }
 }, [props.filter])


  const isExternalFilterPresent = () => {
    return ref.current != 'everyone';
  };

  const doesExternalFilterPass = node => {
    switch (ref.current) {
      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;
    }
  };

https://plnkr.co/edit/gptzZ3ggeLiuT6ov

【讨论】：