在未更新的ag网格回调中使用状态变量

Question

函数isExternalFilterPresent内部的我的使用状态变量query从不更新。我很困惑，因为query中的第一个console.log会随着查询的每次更改而更新。我想这是因为我不太了解钩子的实现。

let gridApi: GridApi | null = null;
const HouseholdTable = ({accountsData, aggregateEntityTable: {aggregateEntity, columnDefs}}: OwnProps & StateProps) => {
const [isDeepDiveOpen, setIsDeepDiveOpen] = useState(false);
const [query, setQuery] = useState('');
useEffect(() => {
gridApi && gridApi.onFilterChanged();
}, [query]);
if (accountsData) {
const onGridReady = ({api}: GridReadyEvent) => {
api.sizeColumnsToFit();
gridApi = api;
};
const aggData = accountsData.aggregations[aggregateEntity];
console.log(query); // This updates when query changes
const isExternalFilterPresent = (): boolean => {
console.log(query); // This never updates
return !!query; 
};
const doesExternalFilterPass = (rowNode: RowNode): boolean => {
// console.log('doesExternalFilterPass');
return true;
};
return (
<>
<HouseholdsToolbar aggData={aggData}
isDeepDiveOpen={isDeepDiveOpen}
onDeepDiveToggleClick={setIsDeepDiveOpen}
onQueryChange={setQuery}
/>
<AgGridReact rowData={[]}
columnDefs={[]}
gridOptions={{
headerHeight: 70,
suppressFieldDotNotation: true,
suppressHorizontalScroll: false,
onGridReady,
isExternalFilterPresent,
doesExternalFilterPass
}}
/>
</>
);
} else {
// handle loading
return (<div>loading</div>);
}
};
const mapStateToProps = (state: StoreState): StateProps => {
const {faStore: {accountsData}} = state;
return {
accountsData,
aggregateEntityTable: aggregateEntityTableDummyConfig
};
};
export default connect(mapStateToProps)(HouseholdTable);
export const aggregateEntityTableDummyConfig: AggregateEntityTable = {
aggregateEntity: 'FOO',
columnDefs: []
};

编辑：使用整个组件进行更新。

Answer 1

这不是钩子的问题。在第一次渲染时，AgGridReact存储对传递给isExternalFilterPresent的函数的引用，然后在重新渲染时从不更改此引用。更清楚的是，AgGridReact存储isExternalFilterPresent的第一个"版本"，并且从不更新它。要解决您的问题，您需要将筛选器的值存储在useRef钩子中。

React医生说：

useRef((Hook不仅仅用于DOM引用。"ref"对象是一个通用容器，其当前属性是可变的，可以包含任何值，类似于类的实例属性。

所以您可能会像考虑类中的属性一样考虑useRef。

这里你要做的：

const query = useRef(null);
const setQuery = (value) => {
query.current = value;
gridApi && gridApi.onFilterChanged();
}
const isExternalFilterPresent = (): boolean => {
console.log(query.current); // Now it changes
return !!query.current; 
};

这里有一个关于codesandbox 的例子