ant-design · zombieJ · Jun 7, 2023 · Jun 1, 2023 · Jun 2, 2023 · Jun 2, 2023
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
@@ -1,9 +1,11 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import React, { useState } from 'react';
+import type { DefaultRecordType } from 'rc-table/lib/interface';
+import React, { useCallback, useEffect, useState } from 'react';
 import type { SelectAllLabel, TransferProps } from '..';
 import Transfer from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import Button from '../../button';
 
 const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -621,4 +623,75 @@ describe('immutable data', () => {
     const { container } = render(<Transfer rowKey={(item) => item.id} dataSource={mockData} />);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('prevent error when reset data in some cases', () => {
+    const App = () => {
+      const [mockData, setMockData] = useState<DefaultRecordType[]>([]);
+      const [targetKeys, setTargetKeys] = useState<string[]>([]);
+
+      const getMock = () => {
+        const tempTargetKeys = [];
+        const tempMockData = [];
+        for (let i = 0; i < 2; i++) {
+          const data = {
+            key: i.toString(),
+            title: `content${i + 1}`,
+            description: `description of content${i + 1}`,
+            chosen: i % 2 === 0,
+          };
+          if (data.chosen) {
+            tempTargetKeys.push(data.key);
+          }
+          tempMockData.push(data);
+        }
+        setMockData(tempMockData);
+        setTargetKeys(tempTargetKeys);
+      };
+
+      useEffect(() => {
+        getMock();
+      }, []);
+
+      const handleChange = (newTargetKeys: string[]) => {
+        setTargetKeys(newTargetKeys);
+      };
+
+      const ButtonRender = useCallback(
+        () => <Button onClick={getMock}>Right button reload</Button>,
+        [getMock],
+      );
+
+      return (
+        <Transfer
+          dataSource={mockData}
+          operations={['to right', 'to left']}
+          targetKeys={targetKeys}
+          onChange={handleChange}
+          render={(item) => `test-${item}`}
+          footer={ButtonRender}
+        />
+      );
+    };
+
+    const { container } = render(<App />);
+    fireEvent.click(container.querySelector('.ant-transfer-list-header input[type="checkbox"]')!);
+    fireEvent.click(container.querySelector('.ant-transfer-operation .ant-btn')!);
+    expect(container.querySelectorAll('.ant-transfer-list')[1]).toBeTruthy();
+    expect(
+      container
+        .querySelectorAll('.ant-transfer-list')[1]
+        .querySelectorAll('.ant-transfer-list-content-item').length,
+    ).toBe(2);
+
+    fireEvent.click(
+      container.querySelectorAll('.ant-transfer-list-header input[type="checkbox"]')![1],
+    );
+    expect(container.querySelectorAll('.ant-transfer-list-header-selected')[1]).toContainHTML(
+      '2/2',
+    );
+    fireEvent.click(container.querySelector('.ant-transfer-list-footer .ant-btn')!);
+    expect(container.querySelectorAll('.ant-transfer-list-header-selected')[1]).toContainHTML(
+      '1/1',
+    );
+  });
 });
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
@@ -155,12 +155,37 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     selectedKeys.filter((key) => targetKeys.includes(key)),
   );
 
+  const propSourceKeys = useMemo(
+    () =>
+      dataSource
+        .map((item) => {
+          if (!props.targetKeys?.includes(item.key!)) {
+            return item.key;
+          }
+          return false;
+        })
+        .filter(Boolean) as string[],
+    [dataSource],
+  );
+
   useEffect(() => {
     if (props.selectedKeys) {
       setSourceSelectedKeys(() => selectedKeys.filter((key) => !targetKeys.includes(key)));
       setTargetSelectedKeys(() => selectedKeys.filter((key) => targetKeys.includes(key)));
+      return;
+    }
+
+    // This is the calculation scheme when there are no props.selectedKeys
+    if (propSourceKeys) {
+      setSourceSelectedKeys(propSourceKeys.filter((key) => sourceSelectedKeys.includes(key)));
+    }
+
+    if (props.targetKeys) {
+      setTargetSelectedKeys(() =>
+        props.targetKeys!.filter((key) => targetSelectedKeys.includes(key)),
+      );
     }
-  }, [props.selectedKeys, props.targetKeys]);
+  }, [props.selectedKeys, props.targetKeys, dataSource]);
 
   if (process.env.NODE_ENV !== 'production') {
     warning(