fix: useMergedState is not updated in time (#6402)

Co-authored-by: siaikin <[email protected]>

Author: siaikin

components/_util/hooks/useMergedState.ts

@@ -1,5 +1,5 @@
 import type { Ref, UnwrapRef } from 'vue';
-import { toRaw, watchEffect, unref, watch, ref } from 'vue';
+import { computed, ref, toRaw, unref, watch } from 'vue';
 
 export default function useMergedState<T, R = Ref<T>>(
   defaultStateValue: T | (() => T),
@@ -21,19 +21,26 @@ export default function useMergedState<T, R = Ref<T>>(
   }
 
   const innerValue = ref(initValue) as Ref<T>;
-  const mergedValue = ref(initValue) as Ref<T>;
-  watchEffect(() => {
-    let val = value.value !== undefined ? value.value : innerValue.value;
-    if (option.postState) {
-      val = option.postState(val as T);
-    }
-    mergedValue.value = val as T;
+  const innerMergedValue = ref(initValue) as Ref<T>;
+  const exposeValue = computed({
+    get: () => {
+      let val = innerValue.value;
+      if (option.postState) {
+        val = option.postState(val as T);
+      }
+      innerMergedValue.value = val as T;
+
+      return innerMergedValue.value;
+    },
+    set: (val: T) => {
+      triggerChange(val);
+    },
   });
 
   function triggerChange(newValue: T) {
-    const preVal = mergedValue.value;
+    const preVal = innerMergedValue.value;
     innerValue.value = newValue;
-    if (toRaw(mergedValue.value) !== newValue && option.onChange) {
+    if (toRaw(innerMergedValue.value) !== newValue && option.onChange) {
       option.onChange(newValue, preVal);
     }
   }
@@ -43,5 +50,5 @@ export default function useMergedState<T, R = Ref<T>>(
     innerValue.value = value.value as T;
   });
 
-  return [mergedValue as unknown as R, triggerChange];
+  return [exposeValue as unknown as R, triggerChange];
 }

components/upload/__tests__/__snapshots__/uploadlist.test.js.snap

@@ -32,6 +32,22 @@ exports[`Upload List handle error 2`] = `
 </div></span></div></span></span>
 `;
 
+exports[`Upload List handle sync throw error 1`] = `
+<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"><div class=""><span><div class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"><div class="ant-upload-list-item-info"><span><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span><span title="foo.png" class="ant-upload-list-item-name">foo.png</span><span class="ant-upload-list-item-card-actions "><a title="Remove file"><span role="img" aria-label="delete" tabindex="-1" title="Remove file" class="anticon anticon-delete"><svg viewBox="64 64 896 896" focusable="false" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></span></a></span></span></div>
+<div class="ant-upload-list-item-progress">
+  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
+    <div>
+      <div class="ant-progress-outer">
+        <div class="ant-progress-inner">
+          <div class="ant-progress-bg" style="width: 0%; height: 2px; border-radius: 100px;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div></span></div></span></span>
+`;
+
 exports[`Upload List should be uploading when upload a file 1`] = `<span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" accept="" style="display: none;"><button>upload</button></span></div><span tag="div" class="ant-upload-list ant-upload-list-text"></span></span>`;
 
 exports[`Upload List should non-image format file preview 1`] = `

components/upload/__tests__/requests.js

@@ -9,3 +9,7 @@ export const errorRequest = ({ onError }) => {
     onError();
   });
 };
+
+export const syncErrorRequest = ({ onError }) => {
+  onError();
+};

components/upload/__tests__/uploadlist.test.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import * as Vue from 'vue';
 import Upload from '..';
-import { errorRequest, successRequest } from './requests';
+import { errorRequest, successRequest, syncErrorRequest } from './requests';
 import PropsTypes from '../../_util/vue-types';
 import { uploadListProps } from '../interface';
 import { sleep } from '../../../tests/utils';
@@ -165,6 +165,38 @@ describe('Upload List', () => {
     }, 0);
   });
 
+  xit('handle sync throw error', done => {
+    const props = {
+      props: {
+        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+        customRequest: syncErrorRequest,
+      },
+      listeners: {
+        change: ({ file }) => {
+          if (file.status !== 'uploading') {
+            expect(wrapper.html()).toMatchSnapshot();
+            done();
+          }
+        },
+      },
+      slots: {
+        default: () => h('button', 'upload'),
+      },
+      sync: false,
+    };
+    const wrapper = mount(Upload, props);
+    setTimeout(() => {
+      const mockFile = new File(['foo'], 'foo.png', {
+        type: 'image/png',
+      });
+      wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
+        target: {
+          files: [mockFile],
+        },
+      });
+    }, 0);
+  });
+
   xit('does concat filelist when beforeUpload returns false', done => {
     const handleChange = jest.fn();
     const props = {