Ag-Grid 外部过滤不响应状态变化答案

【问题标题】：Ag-Grid external filtering doesn't respond to state changesAg-Grid 外部过滤不响应状态变化
【发布时间】：2019-10-19 04:04:57
【问题描述】：

我一直在努力让 Ag-Grid 的外部过滤器响应状态变化。当我更新isExternalFiltered 时，doesExternalFilterPass 回调中isExternalFiltered 的值不会改变。如果我向网格提供一个键来强制它重新呈现每个更新，它似乎可以工作，但它会导致昂贵的网格重新初始化。

我还要注意，当过滤器更改时，我尝试调用网格 api 的 onFilterChanged 方法，但这似乎没有任何效果。

文档似乎没有任何使用 React（或任何框架，就此而言）进行外部过滤的示例，所以我开始怀疑它是否不受支持？

    const Grid = () => {

        const [gridData, setGridData] = useState([]);
        const [columnDefs, setColumnDefs] = useState([]);
        const [isExternalFiltered, setExternalFiltered] = useState(false);

        /*
         Omitted for brevity
        */

        return (            
            <div className="ag-theme-material">
                <AgGridReact
                    // omitted for brevity
                    columnDefs={columnDefs}
                    rowData={gridData}
                    isExternalFilterPresent={() => true}
                    doesExternalFilterPass={node => {
                        return isExternalFiltered
                            ? filterFunction(node.data)
                            : true;
                    }}
                />
            </div>
        );
    };

【问题讨论】：

标签： javascript reactjs ag-grid

【解决方案1】：

有点晚了，但今天早上我遇到了类似的问题，我将发布我发现的内容，以帮助将来解决同样问题的人。发生这种情况是因为 ag-grid React 永远不会更新 isExternalFilterPresent 的回调。我通过将回调存储在一个变量中来确认这一点，导致网格重新呈现，然后检查从 gridApi 获得的 gridOptions 内的 isExternalFilterPresent 的回调。这两个回调始终相同，这意味着您的回调isExternalFilterPresent 关闭的任何值都不会更新。解决此问题的方法是对 isExternalFilterPresent 关闭的任何值使用 ref，以便您始终访问最新的值。

【讨论】：