Fix sort state not change when columns in render

close #12571

components/table/Table.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
 import RcTable from 'rc-table';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
+import shallowEqual from 'shallowequal';
 import Pagination from '../pagination';
 import Icon from '../icon';
 import Spin from '../spin';
@@ -365,7 +366,8 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     // 只同时允许一列进行排序，否则会导致排序顺序的逻辑问题
     let newSortOrder: 'descend' | 'ascend' | undefined;
     // 切换另一列时，丢弃 sortOrder 的状态
-    const oldSortOrder = sortColumn === column ? sortOrder : undefined;
+    const oldSortOrder = (sortColumn === column || shallowEqual(sortColumn, column))
+      ? sortOrder : undefined;
     // 切换排序状态，按照降序/升序/不排序的顺序
     if (!oldSortOrder) {
       newSortOrder = 'descend';

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

@@ -210,4 +210,57 @@ describe('Table.sorter', () => {
     expect(nameColumn.find('.ant-table-column-sorter-down').at(0).getDOMNode().className).toContain(' off');
     expect(ageColumn.find('.ant-table-column-sorter-down').at(0).getDOMNode().className).toContain(' on');
   });
+
+  // https://github.com/ant-design/ant-design/issues/12571
+  it('should toggle sort state when columns are put in render', () => {
+    const testData = [
+      { key: 0, name: 'Jack', age: 11 },
+      { key: 1, name: 'Lucy', age: 20 },
+      { key: 2, name: 'Tom', age: 21 },
+      { key: 3, name: 'Jerry', age: 22 },
+    ];
+    class TableTest extends React.Component {
+      state = {
+        pagination: {},
+      };
+
+      onChange = (pagination) => {
+        this.setState({ pagination });
+      }
+
+      render() {
+        const columns = [{
+          title: 'name',
+          dataIndex: 'name',
+          sorter: true,
+        }];
+        const { pagination } = this.state;
+        return (
+          <Table
+            columns={columns}
+            pagination={pagination}
+            dataSource={testData}
+            onChange={this.onChange}
+          />
+        );
+      }
+    }
+
+    const wrapper = mount(<TableTest />);
+    const nameColumn = wrapper.find('.ant-table-column-sorters').at(0);
+    expect(nameColumn.find('.ant-table-column-sorter-down').at(0).getDOMNode().className).toContain(' off');
+    expect(nameColumn.find('.ant-table-column-sorter-up').at(0).getDOMNode().className).toContain(' off');
+    // sort name
+    nameColumn.simulate('click');
+    expect(nameColumn.find('.ant-table-column-sorter-down').at(0).getDOMNode().className).toContain(' on');
+    expect(nameColumn.find('.ant-table-column-sorter-up').at(0).getDOMNode().className).toContain(' off');
+    // sort name
+    nameColumn.simulate('click');
+    expect(nameColumn.find('.ant-table-column-sorter-down').at(0).getDOMNode().className).toContain(' off');
+    expect(nameColumn.find('.ant-table-column-sorter-up').at(0).getDOMNode().className).toContain(' on');
+    // sort name
+    nameColumn.simulate('click');
+    expect(nameColumn.find('.ant-table-column-sorter-down').at(0).getDOMNode().className).toContain(' off');
+    expect(nameColumn.find('.ant-table-column-sorter-up').at(0).getDOMNode().className).toContain(' off');
+  });
 });