fix: form submitting

xulingling0 · Apr 12, 2024 · 7514c6f · 7514c6f
1 parent 4bf5d7c
commit 7514c6f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/components/Form/__test__/use.test.tsx b/components/Form/__test__/use.test.tsx
@@ -155,4 +155,33 @@ describe('Form.useFormContext', () => {
 
     expect(formInstance).toBe(form);
   });
+
+  it('form useFormContext submiting', async () => {
+    const setSubmitting = jest.fn();
+
+    function Child() {
+      const { isSubmitting } = Form.useFormContext();
+
+      setSubmitting(isSubmitting);
+
+      return <span />;
+    }
+
+    render(
+      <Form onSubmit={() => {}}>
+        <Child />
+        <button type="submit">submit</button>
+      </Form>
+    );
+
+    fireEvent.click(document.querySelector('button[type=submit]') as HTMLElement);
+
+    await sleep(10);
+
+    expect(setSubmitting).toBeCalledTimes(3);
+
+    expect(setSubmitting).toHaveBeenNthCalledWith(1, false);
+    expect(setSubmitting).toHaveBeenNthCalledWith(2, true);
+    expect(setSubmitting).toHaveBeenNthCalledWith(3, false);
+  });
 });
diff --git a/components/Form/hooks/useContext.ts b/components/Form/hooks/useContext.ts
@@ -1,23 +1,28 @@
-import { useContext, useEffect, useState, useCallback } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import { FormInstance, SubmitStatus } from '../interface';
 import { FormContext } from '../context';
 import warn from '../../_util/warning';
+import useForceUpdate from '../../_util/hooks/useForceUpdate';
 
 /**
  * useFormContext 只会返回一些 Form 全局的状态，避免返回某个表单项的状态
  */
 const useFormContext = (): { form: FormInstance; disabled: boolean; isSubmitting: boolean } => {
   const formCtx = useContext(FormContext);
   const formInstance = formCtx.store;
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isSubmittingRef = useRef(false);
+
+  const forceUpdate = useForceUpdate();
 
   const setSubmitting = useCallback(() => {
     const { submitStatus } = formInstance?.getInnerMethods(true)?.innerGetStoreStatus?.() || {};
     const newIsSubmitting = submitStatus === SubmitStatus.submitting;
-    if (isSubmitting !== newIsSubmitting) {
-      setIsSubmitting(newIsSubmitting);
+
+    if (newIsSubmitting !== isSubmittingRef.current) {
+      isSubmittingRef.current = newIsSubmitting;
+      forceUpdate();
     }
-  }, [isSubmitting]);
+  }, []);
 
   useEffect(() => {
     if (!formInstance) {
@@ -40,7 +45,7 @@ const useFormContext = (): { form: FormInstance; disabled: boolean; isSubmitting
   return {
     form: formInstance,
     disabled: formCtx.disabled,
-    isSubmitting,
+    isSubmitting: isSubmittingRef.current,
   };
 };
 

diff --git a/components/Form/store.tsx b/components/Form/store.tsx
@@ -549,14 +549,20 @@ class Store<
         result = onSubmitFailed(errors);
       }
 
-      this.toggleSubmitStatus(errors ? SubmitStatus.error : SubmitStatus.success);
-
       if (result && result.then) {
         // resolve 或者 reject， 都需要更新 submitting 的提交状态
-        result.catch((error) => {
-          // 保持以前的逻辑
-          return Promise.reject(error);
-        });
+        result
+          .then((data) => {
+            this.toggleSubmitStatus(SubmitStatus.success);
+            return data;
+          })
+          .catch((error) => {
+            // 保持以前的逻辑
+            this.toggleSubmitStatus(SubmitStatus.error);
+            return Promise.reject(error);
+          });
+      } else {
+        this.toggleSubmitStatus(errors ? SubmitStatus.error : SubmitStatus.success);
       }
     });
   };