Ag-Grid 外部过滤不响应状态变化 [英] Ag-Grid external filtering doesn't respond to state changes

问题描述

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

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

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

 const Grid = () =>{const [gridData, setGridData] = useState([]);const [columnDefs, setColumnDefs] = useState([]);const [isExternalFiltered, setExternalFiltered] = useState(false);/*为简洁起见省略*/返回 (<div className="ag-theme-material"><AgGridReact//为简洁起见省略columnDefs={columnDefs}行数据={网格数据}isExternalFilterPresent={() =>真的}doExternalFilterPass={node =>{返回 isExternalFiltered?过滤功能(节点.数据): 真的;}}/>

);};

解决方案

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

I've been struggling to get Ag-Grid's external filtering responding to state changes. When I update isExternalFiltered, the value of isExternalFiltered in the doesExternalFilterPass callback doesn't change. If I supply a key to the grid to force it to rerender each update, it seems to work, but it causes an expensive grid reinitialization.

I'll also note that I've tried calling the grid api's onFilterChanged method when the filter changes, but that doesn't seem to have any effect.

The docs don't seem to have any examples of external filtering with React (or any framework, for that matter), so I'm beginning to wonder if maybe it isn't supported?

    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>
        );
    };

解决方案

A bit late but this morning I ran into a similar issue and I'm going to post what I found to help people in the future with this same problem. This happens because ag-grid React never updates the callback for isExternalFilterPresent. I confirmed this by storing the callback in a variable, causing the grid to rerender, and then inspecting the callback for isExternalFilterPresent inside of the gridOptions gotten from the gridApi. These two callbacks are always the same which means that any values that your callback, isExternalFilterPresent, close over are never update. The way around this is to use a ref for any of the values that isExternalFilterPresent close over so you always access the most up to date value.

这篇关于Ag-Grid 外部过滤不响应状态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！