From 53c26e683643eecef797a0bc442e4d8d1806c346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B3=B7=E6=B6=AF?= <i@sylingd.com>
Date: Fri, 26 Apr 2024 16:58:21 +0800
Subject: [PATCH] fix: form field validate write opreation not check unmoun
 status (#2206)

Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>
---
 packages/semi-ui/form/hoc/withField.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/semi-ui/form/hoc/withField.tsx b/packages/semi-ui/form/hoc/withField.tsx
index 16f7a60e64..9b93cf293a 100644
--- a/packages/semi-ui/form/hoc/withField.tsx
+++ b/packages/semi-ui/form/hoc/withField.tsx
@@ -147,6 +147,7 @@ function withField<
         const [cursor, setCursor, getCursor] = useStateWithGetter(0);
         const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
+        const isUnmounted = useRef(false);
         const rulesRef = useRef(rules);
         const validateRef = useRef(validate);
         const validatePromise = useRef<Promise<any> | null>(null);
@@ -159,6 +160,9 @@ function withField<
         };
 
         const updateError = (errors: any, callOpts?: CallOpts) => {
+            if (isUnmounted.current) {
+                return;
+            }
             if (errors === getError()) {
                 // When the inspection result is unchanged, no need to update, saving a forceUpdate overhead
                 // When errors is an array, deepEqual is not used, and it is always treated as a need to update
@@ -214,7 +218,7 @@ function withField<
                         (errors, fields) => {}
                     )
                     .then(res => {
-                        if (validatePromise.current !== rootPromise) {
+                        if (isUnmounted.current || validatePromise.current !== rootPromise) {
                             return;
                         }
                         // validation passed
@@ -223,7 +227,7 @@ function withField<
                         resolve({});
                     })
                     .catch(err => {
-                        if (validatePromise.current !== rootPromise) {
+                        if (isUnmounted.current || validatePromise.current !== rootPromise) {
                             return;
                         }
                         let { errors, fields } = err;
@@ -270,7 +274,7 @@ function withField<
                 } else if (isPromise(maybePromisedErrors)) {
                     maybePromisedErrors.then((result: any) => {
                         // If the async validate is outdated (a newer validate occurs), the result should be discarded
-                        if (validatePromise.current !== rootPromise) {
+                        if (isUnmounted.current || validatePromise.current !== rootPromise) {
                             return;
                         }
 
@@ -408,11 +412,14 @@ function withField<
             validateRef.current = validate;
         }, [rules, validate]);
 
-        // exec validate once when trigger inlcude 'mount'
         useIsomorphicEffect(() => {
+            // exec validate once when trigger include 'mount'
             if (validateOnMount) {
                 fieldValidate(value);
             }
+            return () => {
+                isUnmounted.current = true;
+            };
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);