fix(core): fix unmount onChange trigger and x-linkages array merge (#742

) * fix(core): fix unmount onChange trigger * fix(schema-renderer): fix array merge
alibaba · Mar 23, 2020 · b928dc3 · b928dc3
1 parent c61d595
commit b928dc3
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 9 deletions.
diff --git a/docs/zh-cn/jsx-develop/faq.md b/docs/zh-cn/jsx-develop/faq.md
@@ -1 +1,80 @@
-# FAQ
+# FAQ
+
+```jsx
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { SchemaForm } from "@formily/antd"; // 或者 @formily/next
+import { Input, Select, Radio } from "@formily/antd-components";
+import Printer from "@formily/printer";
+import "antd/dist/antd.css";
+
+const mockSchema = {
+  type: "object",
+  properties: {
+    aa: {
+      type: "boolean",
+      enum: [
+        { label: "设置bb的枚举列表", value: true },
+        { label: "还原bb的枚举列表", value: false }
+      ],
+      default: false,
+      title: "AA",
+      "x-component": "RadioGroup",
+      "x-linkages": [
+        {
+          type: "value:schema",
+          target: "bb",
+          condition: "{{!!$value}}",
+          schema: {
+            enum: ["xx1", "xx2", "xx3"]
+          },
+          otherwise: {
+            enum: ["zz"]
+          }
+        }
+      ]
+    },
+    bb: {
+      type: "string",
+      title: "BB",
+      "x-component": "Input",
+      enum: ["yy"]
+    },
+    cc: {
+      type: "string",
+      title: "{{customCCTitle}}",
+      "x-component": "Input"
+    }
+  }
+};
+
+const App = () => {
+  const [schema, setSchema] = useState({
+    type: "object"
+  });
+  useEffect(() => {
+    setTimeout(() => {
+      setSchema(mockSchema);
+    }, 1000);
+  }, []);
+
+  return (
+    <Printer>
+      <SchemaForm
+        schema={schema}
+        components={{ Input, Select, RadioGroup: Radio.Group }}
+        onSubmit={values => {
+          console.log(values);
+        }}
+        expressionScope={{
+          customTitle: "this is custom title",
+          customCCTitle: "CC"
+        }}
+      />
+    </Printer>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+```
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -108,9 +108,10 @@ export function createForm<FieldProps, VirtualFieldProps>(
   }
 
   function notifyFormValuesChange() {
-    if (isFn(options.onChange)) {
+    if (isFn(options.onChange) && !state.state.unmounted) {
       clearTimeout(env.onChangeTimer)
       env.onChangeTimer = setTimeout(() => {
+        if (state.state.unmounted) return
         options.onChange(clone(getFormValuesIn('')))
       })
     }
@@ -986,7 +987,7 @@ export function createForm<FieldProps, VirtualFieldProps>(
         })
       })
     })
-    if (isFn(options.onReset)) {
+    if (isFn(options.onReset) && !state.state.unmounted) {
       options.onReset()
     }
     heart.publish(LifeCycleTypes.ON_FORM_RESET, state)
@@ -1028,7 +1029,7 @@ export function createForm<FieldProps, VirtualFieldProps>(
         // 增加onFormSubmitValidateFailed来明确结束submit的类型
         heart.publish(LifeCycleTypes.ON_FORM_SUBMIT_VALIDATE_FAILED, state)
         heart.publish(LifeCycleTypes.ON_FORM_SUBMIT_END, state)
-        if (isFn(options.onValidateFailed)) {
+        if (isFn(options.onValidateFailed) && !state.state.unmounted) {
           options.onValidateFailed(validated)
         }
 
@@ -1042,7 +1043,7 @@ export function createForm<FieldProps, VirtualFieldProps>(
 
       let payload,
         values = state.getState(state => clone(state.values))
-      if (isFn(onSubmit)) {
+      if (isFn(onSubmit) && !state.state.unmounted) {
         try {
           payload = await Promise.resolve(onSubmit(values))
           heart.publish(LifeCycleTypes.ON_FORM_ON_SUBMIT_SUCCESS, payload)

diff --git a/packages/react-schema-renderer/src/linkages/schema.ts b/packages/react-schema-renderer/src/linkages/schema.ts
@@ -11,7 +11,8 @@ export const useValueSchemaLinkageEffect = (scope?: any) =>
             $target: innerState
           }),
           {
-            assign: true
+            assign: true,
+            arrayMerge:(target,source)=>source
           }
         )
       })
@@ -25,7 +26,8 @@ export const useValueSchemaLinkageEffect = (scope?: any) =>
             $target: innerState
           }),
           {
-            assign: true
+            assign: true,
+            arrayMerge:(target,source)=>source
           }
         )
       })

diff --git a/packages/react-schema-renderer/src/linkages/state.ts b/packages/react-schema-renderer/src/linkages/state.ts
@@ -11,7 +11,8 @@ export const useValueStateLinkageEffect = (scope?: any) =>
             $target: innerState
           }),
           {
-            assign: true
+            assign: true,
+            arrayMerge: (target, source) => source
           }
         )
       })
@@ -25,7 +26,8 @@ export const useValueStateLinkageEffect = (scope?: any) =>
             $target: innerState
           }),
           {
-            assign: true
+            assign: true,
+            arrayMerge: (target, source) => source
           }
         )
       })