lu-lowcode-package-form 0.11.41 → 0.11.43

package/src/components/form-container/index.jsx

@@ -52,9 +52,17 @@ function batchElements(elements, groupSize,dmap) {
 
 const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) => {
     const [form] = Form.useForm();
+    const formContentRef = React.useRef(null);
     const [formContent, setFormContent] = React.useState(null);
 
     const dependencyMap = React.useRef(null);
+    const updateFormContent = () => {
+        const newFormContent = memoizedRenderChildren();
+        if (!isEqual(formContentRef.current, newFormContent)) {
+            formContentRef.current = newFormContent;
+            setFormContent(newFormContent);
+          }
+    }
     // 调用setFieldsValue时,进入锁定状态,阻止因字段值变化而触发级联处理
     const lockStatus = React.useRef(0);
     React.useImperativeHandle(ref, () => ({
@@ -88,7 +96,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             await initializeDependencyMap();
             console.log("initializeDependencyMap")
             requestAnimationFrame(() => {
-                setFormContent(renderChildren());
+                updateFormContent();
             })
             // console.log("throttledInitializeFormRender end")
 
@@ -177,7 +185,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         // for (let key of dependencyMap.current.keys()) {
         //    await handleFieldsWith(key, fieldValues, true);
         // }
-        if (reloadFields) setFormContent(renderChildren());
+        if (reloadFields) updateFormContent();
     };
     // 初始化字段的级联关系
     const initializeFieldVisibility = debounce(async (reloadFields = false) => {
@@ -245,6 +253,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         changedFieldsState.current[fieldName] = fieldValue;
     }
     const recordFieldsChange = (changedFields, handleChange = false) => {
+        console.log("recordFieldsChange", changedFields,handleChange)
         var changedKeys = Object.keys(changedFields)
         if (changedKeys.length > 0) {
             changedKeys.forEach(key => {
@@ -618,13 +627,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             }
             if (needRefresh) {
                 console.log("needRefresh", needRefresh)
-                setFormContent(renderChildren());
+                updateFormContent();
             }
             changedFieldsState.current = {};
         }, delay);
     }, []);
 
-    const handleFieldsChange = (changedFields) => {
+    const handleFieldsChange = React.useCallback((changedFields) => {
         changedFields.filter(field => {
             if (field.name && field.name.length > 0) {
                 // const fieldKey = field.name.filter(item => typeof item == "string").join(".")
@@ -633,7 +642,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         })
 
         debounceHandleFieldsChange();
-    }
+    }, []);
 
     const getTableWithIds = (ids) => {
         let withAllIds = []
@@ -678,6 +687,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
         return null
     }
+    const memoizedRenderChildren = () => {
+        console.log("memoizedRenderChildren", dependencyMap.current)
+        if (dependencyMap.current) {
+            return renderChildren();
+        }
+        return null;
+      }
     const renderChildren = () => {
         console.log("renderChildren")
         const renderKey = nanoid()
@@ -694,6 +710,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         );
 
 
+        
+
+
 
 
         return groupedChildren.map((group, index) => (