perf(Form): update controlled key mapping to use displayNam

Author: RylanBot

packages/components/form/FormItem.tsx

@@ -1,10 +1,10 @@
-import { flattenDeep, get, isEqual, isFunction, isObject, isString, merge, set, unset } from 'lodash-es';
 import React, { forwardRef, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import {
   CheckCircleFilledIcon as TdCheckCircleFilledIcon,
   CloseCircleFilledIcon as TdCloseCircleFilledIcon,
   ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
 } from 'tdesign-icons-react';
+import { flattenDeep, get, isEqual, isFunction, isObject, isString, merge, set, unset } from 'lodash-es';
 import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
 import useGlobalIcon from '../hooks/useGlobalIcon';
@@ -14,7 +14,7 @@ import { formItemDefaultProps } from './defaultProps';
 import { useFormContext, useFormListContext } from './FormContext';
 import { parseMessage, validate as validateModal } from './formModel';
 import { HOOK_MARK } from './hooks/useForm';
-import useFormItemInitialData, { ctrlKeyMap } from './hooks/useFormItemInitialData';
+import useFormItemInitialData, { CTRL_KEY_MAP } from './hooks/useFormItemInitialData';
 import useFormItemStyle from './hooks/useFormItemStyle';
 import { calcFieldValue } from './utils';
 
@@ -521,7 +521,9 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
                 });
               }
               if (typeof child.type === 'object') {
-                ctrlKey = ctrlKeyMap.get(child.type) || 'value';
+                // @ts-ignore
+                const componentName = child.type?.displayName;
+                ctrlKey = CTRL_KEY_MAP.get(componentName) || 'value';
               }
               const childProps = child.props as any;
               return React.cloneElement(child, {

packages/components/form/hooks/useFormItemInitialData.ts

@@ -1,34 +1,33 @@
 import React, { useEffect } from 'react';
-import { get, unset, isEmpty } from 'lodash-es';
-
-// 兼容特殊数据结构和受控 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 { get, isEmpty, unset } from 'lodash-es';
 
 import { useFormContext, useFormListContext } from '../FormContext';
-import { FormItemProps } from '../FormItem';
+import type { FormItemProps } from '../FormItem';
+
+export const CTRL_KEY_MAP = new Map<string, string>();
+CTRL_KEY_MAP.set('Checkbox', 'checked');
+CTRL_KEY_MAP.set('CheckTag', 'checked');
+CTRL_KEY_MAP.set('Upload', 'files');
+
+const ARRAY_DEFAULT_COMPONENTS = [
+  'Tree',
+  'Upload',
+  'Transfer',
+  'TagInput',
+  'RangeInput',
+  'CheckboxGroup',
+  'DateRangePicker',
+  'TimeRangePicker',
+];
+const BOOLEAN_DEFAULT_COMPONENTS = ['Checkbox'];
 
-// FormItem 子组件受控 key
-export const ctrlKeyMap = new Map();
-ctrlKeyMap.set(Checkbox, 'checked');
-ctrlKeyMap.set(CheckTag, 'checked');
-ctrlKeyMap.set(Upload, 'files');
+export const initialDataMap = new Map<string, any>();
 
-// FormItem 默认数据类型
-export const initialDataMap = new Map();
-[Tree, Upload, Transfer, TagInput, RangeInput, CheckboxGroup, DateRangePicker, TimeRangePicker].forEach((component) => {
-  initialDataMap.set(component, []);
+ARRAY_DEFAULT_COMPONENTS.forEach((componentName) => {
+  initialDataMap.set(componentName, []);
 });
-[Checkbox].forEach((component) => {
-  initialDataMap.set(component, false);
+BOOLEAN_DEFAULT_COMPONENTS.forEach((componentName) => {
+  initialDataMap.set(componentName, false);
 });
 
 export default function useFormItemInitialData(name: FormItemProps['name']) {
@@ -81,9 +80,10 @@ export default function useFormItemInitialData(name: FormItemProps['name']) {
       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);
+        // @ts-ignore
+        const componentName = lastChild.type.displayName;
+        return isMultiple ? [] : initialDataMap.get(componentName);
       }
     }
   }