fix(Form): fixed issue Tencent#3076

src/form/Form.tsx

@@ -63,6 +63,14 @@ const Form = forwardRefWithStatics(
       form?.getInternalHooks?.(HOOK_MARK)?.flashQueue?.();
     }, [form]);
 
+    // form 卸载时清空 floatingFormData
+    React.useEffect(
+      () => () => {
+        form.clearFloatingFormData();
+      },
+      [form],
+    );
+
     function onResetHandler(e: React.FormEvent<HTMLFormElement>) {
       [...formMapRef.current.values()].forEach((formItemRef) => {
         formItemRef?.current.resetField();

src/form/FormItem.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, ReactNode, useState, useImperativeHandle, useEffect,
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import get from 'lodash/get';
+import unset from 'lodash/unset';
 import merge from 'lodash/merge';
 import isFunction from 'lodash/isFunction';
 import {
@@ -25,8 +26,8 @@ import { HOOK_MARK } from './hooks/useForm';
 import { validate as validateModal, parseMessage } from './formModel';
 import { useFormContext, useFormListContext } from './FormContext';
 import useFormItemStyle from './hooks/useFormItemStyle';
+import useFormItemInitialData, { ctrlKeyMap } from './hooks/useFormItemInitialData';
 import { formItemDefaultProps } from './defaultProps';
-import { ctrlKeyMap, getDefaultInitialData } from './useInitialData';
 import { ValidateStatus } from './const';
 import useDefaultProps from '../hooks/useDefaultProps';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
@@ -62,7 +63,6 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     form,
     colon,
     layout,
-    initialData: FormContextInitialData,
     requiredMark: requiredMarkFromContext,
     labelAlign: labelAlignFromContext,
     labelWidth: labelWidthFromContext,
@@ -76,12 +76,9 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     onFormItemValueChange,
   } = useFormContext();
 
-  const {
-    name: formListName,
-    rules: formListRules,
-    formListMapRef,
-    initialData: FormListInitialData,
-  } = useFormListContext();
+  const { name: formListName, rules: formListRules, formListMapRef } = useFormListContext();
+
+  const { getDefaultInitialData } = useFormItemInitialData();
 
   const props = useDefaultProps<FormItemProps>(originalProps, formItemDefaultProps);
 
@@ -115,13 +112,15 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
   const [formValue, setFormValue] = useState(
     getDefaultInitialData({
       name,
-      formListName,
       children,
       initialData,
-      FormContextInitialData,
-      FormListInitialData,
     }),
   );
+  // 组件渲染后删除对应游离值
+  useEffect(() => {
+    const nameList = formListName ? [formListName, name].flat() : name;
+    unset(form.floatingFormData, nameList);
+  }, [form.floatingFormData, formListName, name]);
 
   const formItemRef = useRef<FormItemInstance>(); // 当前 formItem 实例
   const innerFormItemsRef = useRef([]);
@@ -326,11 +325,8 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     if (resetType === 'initial') {
       return getDefaultInitialData({
         name,
-        formListName,
         children,
         initialData,
-        FormContextInitialData,
-        FormListInitialData,
       });
     }
 

src/form/hooks/useFormItemInitialData.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import get from 'lodash/get';
+
+// 兼容特殊数据结构和受控 key
+import Tree from '../../tree/Tree';
+import Upload from '../../upload/upload';
+import CheckTag from '../../tag/CheckTag';
+import Checkbox from '../../checkbox/Checkbox';
+import TagInput from '../../tag-input/TagInput';
+import RangeInput from '../../range-input/RangeInput';
+import Transfer from '../../transfer/Transfer';
+import CheckboxGroup from '../../checkbox/CheckboxGroup';
+import DateRangePicker from '../../date-picker/DateRangePicker';
+import TimeRangePicker from '../../time-picker/TimeRangePicker';
+
+import { useFormContext, useFormListContext } from '../FormContext';
+import { FormItemProps } from '../FormItem';
+
+// FormItem 子组件受控 key
+export const ctrlKeyMap = new Map();
+ctrlKeyMap.set(Checkbox, 'checked');
+ctrlKeyMap.set(CheckTag, 'checked');
+ctrlKeyMap.set(Upload, 'files');
+
+// FormItem 默认数据类型
+export const initialDataMap = new Map();
+[Tree, Upload, Transfer, TagInput, RangeInput, CheckboxGroup, DateRangePicker, TimeRangePicker].forEach((component) => {
+  initialDataMap.set(component, []);
+});
+[Checkbox].forEach((component) => {
+  initialDataMap.set(component, false);
+});
+
+export default function useFormItemInitialData() {
+  const { form, initialData: formContextInitialData } = useFormContext();
+  const { floatingFormData } = form;
+
+  const { name: formListName, initialData: formListInitialData } = useFormListContext();
+
+  // 整理初始值 优先级：Form.initialData < FormList.initialData < FormItem.initialData < floatFormData
+  function getDefaultInitialData({
+    name,
+    children,
+    initialData,
+  }: {
+    name: FormItemProps['name'];
+    children: FormItemProps['children'];
+    initialData: FormItemProps['initialData'];
+  }) {
+    if (name && floatingFormData) {
+      const nameList = formListName ? [formListName, name].flat() : name;
+      const defaultInitialData = get(floatingFormData, nameList);
+      if (typeof defaultInitialData !== 'undefined') return defaultInitialData;
+    }
+
+    if (initialData) {
+      return initialData;
+    }
+
+    if (name && formListInitialData.length) {
+      const defaultInitialData = get(formListInitialData, name);
+      if (typeof defaultInitialData !== 'undefined') return defaultInitialData;
+    }
+
+    if (name && formContextInitialData) {
+      const defaultInitialData = get(formContextInitialData, name);
+      if (typeof defaultInitialData !== 'undefined') return defaultInitialData;
+    }
+
+    if (typeof children !== 'function') {
+      const childList = React.Children.toArray(children);
+      const lastChild = childList[childList.length - 1];
+      if (lastChild && React.isValidElement(lastChild)) {
+        // @ts-ignore
+        const isMultiple = lastChild?.props?.multiple;
+        return isMultiple ? [] : initialDataMap.get(lastChild.type);
+      }
+    }
+  }
+
+  return {
+    getDefaultInitialData,
+  };
+}

src/form/hooks/useInstance.tsx

@@ -1,6 +1,9 @@
 import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import merge from 'lodash/merge';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import { useRef } from 'react';
 import type {
   TdFormProps,
   FormValidateResult,
@@ -10,7 +13,7 @@ import type {
   NamePath,
 } from '../type';
 import useConfig from '../../hooks/useConfig';
-import { getMapValue, travelMapFromObject, calcFieldValue } from '../utils';
+import { getMapValue, objectToArray, travelMapFromObject, calcFieldValue } from '../utils';
 import log from '../../_common/js/log';
 
 // 检测是否需要校验 默认全量校验
@@ -42,6 +45,7 @@ function formatValidateResult(validateResultList) {
 
 export default function useInstance(props: TdFormProps, formRef, formMapRef: React.MutableRefObject<Map<any, any>>) {
   const { classPrefix } = useConfig();
+  const floatingFormDataRef = useRef<Record<any, any>>({});
 
   const { scrollToFirstError, preventSubmitDefault = true, onSubmit, onReset } = props;
 
@@ -139,8 +143,16 @@ export default function useInstance(props: TdFormProps, formRef, formMapRef: Rea
 
   // 对外方法，设置对应 formItem 的值
   function setFieldsValue(fields = {}) {
-    travelMapFromObject(fields, formMapRef, (formItemRef, fieldValue) => {
-      formItemRef?.current?.setValue?.(fieldValue, fields);
+    const nameLists = objectToArray(fields);
+
+    nameLists.forEach((nameList) => {
+      const fieldValue = get(fields, nameList);
+      const formItemRef = formMapRef.current.get(nameList.length > 1 ? nameList : nameList[0]);
+      if (formItemRef?.current) {
+        formItemRef?.current?.setValue?.(fieldValue, fields);
+      } else {
+        set(floatingFormDataRef.current, nameList, fieldValue);
+      }
     });
   }
 
@@ -198,6 +210,11 @@ export default function useInstance(props: TdFormProps, formRef, formMapRef: Rea
     });
   }
 
+  // 对外方法，清空 floatingFormData
+  function clearFloatingFormData() {
+    floatingFormDataRef.current = {};
+  }
+
   return {
     submit,
     reset,
@@ -211,5 +228,7 @@ export default function useInstance(props: TdFormProps, formRef, formMapRef: Rea
     getFieldsValue,
     currentElement: formRef.current,
     getCurrentElement: () => formRef.current,
+    floatingFormData: floatingFormDataRef.current,
+    clearFloatingFormData,
   };
 }

src/form/type.ts

@@ -153,6 +153,14 @@ export interface FormInstanceFunctions<FormData extends Data = Data> {
    * 纯净的校验函数，仅返回校验结果，不对组件进行任何操作。泛型 `FormData` 表示表单数据 TS 类型。参数和返回值含义同 `validate` 方法
    */
   validateOnly: (params?: Pick<FormValidateParams, 'fields' | 'trigger'>) => Promise<FormValidateResult<FormData>>;
+  /**
+   * 游离 formData，若调用 setFieldsValue 设置值对应的组件还没渲染，会暂存为游离值
+   */
+  floatingFormData?: Record<any, any>;
+  /**
+   * 重置游离 formData
+   */
+  clearFloatingFormData?: () => void;
 }
 
 export interface TdFormItemProps {