fix: upload fileList with immuable data (#28636)

* fix: upload fileList with immuable data

* perf: optimize code

* ci: fix lint error

* feat: reduce cycles counts

* feat: reduce cycles counts

* ci: fix lint error

* ci: fix lint error

components/upload/Upload.tsx

@@ -162,22 +162,32 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   };
 
   const handleRemove = (file: UploadFile) => {
+    let currentFile: UploadFile;
     Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
       // Prevent removing file
       if (ret === false) {
         return;
       }
 
-      const removedFileList = removeFileItem(file, getFileList());
+      const fileList = getFileList();
+      const removedFileList = removeFileItem(file, fileList);
 
       if (removedFileList) {
-        file.status = 'removed';
+        currentFile = { ...file, status: 'removed' };
+        fileList?.some(item => {
+          const matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
+          if (item[matchKey] === currentFile[matchKey]) {
+            item.status = 'removed';
+            return true;
+          }
+          return false;
+        });
         if (upload.current) {
-          upload.current.abort(file);
+          upload.current.abort(currentFile);
         }
 
         onInternalChange({
-          file,
+          file: currentFile,
           fileList: removedFileList,
         });
       }

components/upload/__tests__/upload.test.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+import produce from 'immer';
 import Upload from '..';
 import Form from '../../form';
 import { T, fileToObject, getFileItem, removeFileItem } from '../utils';
@@ -326,6 +327,29 @@ describe('Upload', () => {
       expect(targetItem).toEqual(fileList.slice(1));
     });
 
+    it('remove fileItem and fileList with immuable data', () => {
+      const file = { uid: '-3', name: 'item3.jpg' };
+      const fileList = produce(
+        [
+          {
+            uid: '-1',
+            name: 'item.jpg',
+          },
+          {
+            uid: '-2',
+            name: 'item2.jpg',
+          },
+        ],
+        draftState => {
+          draftState.push({
+            uid: '-3',
+            name: 'item3.jpg',
+          });
+        },
+      );
+      const targetItem = removeFileItem(file, fileList);
+      expect(targetItem).toEqual(fileList.slice(0, 2));
+    });
     it('should not be able to remove fileItem', () => {
       const file = { uid: '-3', name: 'item.jpg' };
       const fileList = [

package.json

@@ -217,6 +217,7 @@
     "husky": "^4.0.3",
     "identity-obj-proxy": "^3.0.0",
     "ignore-emit-webpack-plugin": "^2.0.6",
+    "immer": "^8.0.0",
     "immutability-helper": "^3.0.0",
     "inquirer": "^7.1.0",
     "intersection-observer": "^0.12.0",