diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index 8ff849cf7d..39c7d12e1c 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -1104,4 +1104,71 @@ describe('Table.filter', () => {
mount();
});
+
+ // https://github.com/ant-design/ant-design/issues/20854
+ it('Not cache for onChange state', () => {
+ const onChange = jest.fn();
+
+ const wrapper = mount(
+
,
+ );
+
+ // Sort it
+ wrapper.find('.ant-table-column-sorters').simulate('click');
+ expect(onChange).toHaveBeenCalledWith(
+ expect.anything(),
+ {
+ gender: null,
+ },
+ expect.objectContaining({
+ column: {
+ dataIndex: 'name',
+ sorter: true,
+ title: 'Name',
+ },
+ }),
+ expect.anything(),
+ );
+
+ // Filter it
+ onChange.mockReset();
+ wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+ wrapper
+ .find('.ant-dropdown-menu-item')
+ .first()
+ .simulate('click');
+ wrapper.find('.ant-table-filter-dropdown-link.confirm').simulate('click');
+ expect(onChange).toHaveBeenCalledWith(
+ expect.anything(),
+ {
+ gender: ['male'],
+ },
+ expect.objectContaining({
+ column: {
+ dataIndex: 'name',
+ sorter: true,
+ title: 'Name',
+ },
+ }),
+ expect.anything(),
+ );
+ });
});
diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx
index 874b8fac8b..5dc0e7e0ac 100644
--- a/components/table/hooks/useFilter/index.tsx
+++ b/components/table/hooks/useFilter/index.tsx
@@ -208,18 +208,16 @@ function useFilter({
onFilterChange(generateFilterInfo(newFilterStates), newFilterStates);
};
- const transformColumns = React.useMemo(() => {
- return (innerColumns: ColumnsType) =>
- injectFilter(
- prefixCls,
- dropdownPrefixCls,
- innerColumns,
- mergedFilterStates,
- triggerFilter,
- getPopupContainer,
- tableLocale,
- );
- }, [mergedFilterStates]);
+ const transformColumns = (innerColumns: ColumnsType) =>
+ injectFilter(
+ prefixCls,
+ dropdownPrefixCls,
+ innerColumns,
+ mergedFilterStates,
+ triggerFilter,
+ getPopupContainer,
+ tableLocale,
+ );
return [transformColumns, mergedFilterStates, getFilters];
}
diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx
index 689e96a173..cde513ce57 100644
--- a/components/table/hooks/useSorter.tsx
+++ b/components/table/hooks/useSorter.tsx
@@ -362,11 +362,8 @@ export default function useFilterSorter({
onSorterChange(generateSorterInfo(newSorterStates), newSorterStates);
}
- const transformColumns = React.useCallback(
- (innerColumns: ColumnsType) =>
- injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections),
- [mergedSorterStates],
- );
+ const transformColumns = (innerColumns: ColumnsType) =>
+ injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections);
const getSorters = () => {
return generateSorterInfo(mergedSorterStates);