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

This reverts commit 670ff3f.

Author: tangjinzhou

components/_util/hooks/useMergedState.ts

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

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

@@ -32,22 +32,6 @@ 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,7 +9,3 @@ 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, syncErrorRequest } from './requests';
+import { errorRequest, successRequest } from './requests';
 import PropsTypes from '../../_util/vue-types';
 import { uploadListProps } from '../interface';
 import { sleep } from '../../../tests/utils';
@@ -165,38 +165,6 @@ 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 = {