From f470f3e1e425fd9cf1e9b444ede604c29dadd149 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 13 Jan 2020 15:04:27 +0800
Subject: [PATCH] fix: Table onChange return cached data (#20858)

---
 .../table/__tests__/Table.filter.test.js      | 67 +++++++++++++++++++
 components/table/hooks/useFilter/index.tsx    | 22 +++---
 components/table/hooks/useSorter.tsx          |  7 +-
 3 files changed, 79 insertions(+), 17 deletions(-)

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(<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(),
+    );
+  });
 });
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<RecordType>({
     onFilterChange(generateFilterInfo(newFilterStates), newFilterStates);
   };
 
-  const transformColumns = React.useMemo(() => {
-    return (innerColumns: ColumnsType<RecordType>) =>
-      injectFilter(
-        prefixCls,
-        dropdownPrefixCls,
-        innerColumns,
-        mergedFilterStates,
-        triggerFilter,
-        getPopupContainer,
-        tableLocale,
-      );
-  }, [mergedFilterStates]);
+  const transformColumns = (innerColumns: ColumnsType<RecordType>) =>
+    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<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);