fix: Table onChange return cached data (#20858)

components/table/__tests__/Table.filter.test.js

@@ -1104,4 +1104,71 @@ describe('Table.filter', () => {
 
     mount(<TestTable />);
   });
+
+  // https://github.com/ant-design/ant-design/issues/20854
+  it('Not cache for onChange state', () => {
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      <Table
+        columns={[
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            sorter: true,
+          },
+          {
+            title: 'Gender',
+            dataIndex: 'gender',
+            filters: [
+              { text: 'Male', value: 'male' },
+              { text: 'Female', value: 'female' },
+            ],
+          },
+        ]}
+        dataSource={[]}
+        onChange={onChange}
+      />,
+    );
+
+    // 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(),
+    );
+  });
 });

components/table/hooks/useFilter/index.tsx

@@ -208,8 +208,7 @@ function useFilter<RecordType>({
     onFilterChange(generateFilterInfo(newFilterStates), newFilterStates);
   };
 
-  const transformColumns = React.useMemo(() => {
-    return (innerColumns: ColumnsType<RecordType>) =>
+  const transformColumns = (innerColumns: ColumnsType<RecordType>) =>
     injectFilter(
       prefixCls,
       dropdownPrefixCls,
@@ -219,7 +218,6 @@ function useFilter<RecordType>({
       getPopupContainer,
       tableLocale,
     );
-  }, [mergedFilterStates]);
 
   return [transformColumns, mergedFilterStates, getFilters];
 }

components/table/hooks/useSorter.tsx

@@ -362,11 +362,8 @@ export default function useFilterSorter<RecordType>({
     onSorterChange(generateSorterInfo(newSorterStates), newSorterStates);
   }
 
-  const transformColumns = React.useCallback(
-    (innerColumns: ColumnsType<RecordType>) =>
-      injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections),
-    [mergedSorterStates],
-  );
+  const transformColumns = (innerColumns: ColumnsType<RecordType>) =>
+    injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections);
 
   const getSorters = () => {
     return generateSorterInfo(mergedSorterStates);