fix: correct move operation to keep field.name in sync

RylanBot · RylanBot · commit aade6677db08 · 2025-11-11T22:07:04.000+08:00
diff --git a/packages/components/form/Form.tsx b/packages/components/form/Form.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import { cloneDeep } from 'lodash-es';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import noop from '../_util/noop';
 import useConfig from '../hooks/useConfig';
diff --git a/packages/components/form/FormContext.tsx b/packages/components/form/FormContext.tsx
@@ -53,7 +53,7 @@ export const FormListContext = React.createContext<{
   name: NamePath;
   fullPath?: NamePath;
   rules: TdFormListProps['rules'];
-  formListMapRef: React.RefObject<Map<any, React.RefObject<FormItemInstance>>>;
+  formListMapRef: React.RefObject<Map<NamePath, React.RefObject<FormItemInstance>>>;
   initialData: TdFormListProps['initialData'];
   form?: InternalFormInstance;
 }>({
diff --git a/packages/components/form/FormItem.tsx b/packages/components/form/FormItem.tsx
@@ -16,7 +16,7 @@ import { parseMessage, validate as validateModal } from './formModel';
 import { HOOK_MARK } from './hooks/useForm';
 import useFormItemInitialData, { ctrlKeyMap } from './hooks/useFormItemInitialData';
 import useFormItemStyle from './hooks/useFormItemStyle';
-import { calcFieldValue, concatNamePath } from './utils';
+import { calcFieldValue, concatName } from './utils';
 
 import type { StyledProps } from '../common';
 import type {
@@ -106,7 +106,7 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
   const { getDefaultInitialData } = useFormItemInitialData(name);
 
   const { fullPath: parentFullPath } = useFormListContext();
-  const fullPath = concatNamePath(parentFullPath, name);
+  const fullPath = concatName(parentFullPath, name);
 
   const [, forceUpdate] = useState({}); // custom render state
   const [freeShowErrorMessage, setFreeShowErrorMessage] = useState(undefined);
@@ -434,8 +434,8 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     formMapRef.current.set(fullPath, formItemRef);
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      formMapRef.current.delete(fullPath);
-      unset(form?.store, name);
+      // formMapRef.current.delete(fullPath);
+      // unset(form?.store, name);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [snakeName, formListName]);
diff --git a/packages/components/form/FormList.tsx b/packages/components/form/FormList.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { cloneDeep, get, isEqual, merge, set, unset } from 'lodash-es';
 import log from '@tdesign/common-js/log/index';
+import { castArray, cloneDeep, get, isEqual, merge, set, unset } from 'lodash-es';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { FormListContext, useFormContext, useFormListContext } from './FormContext';
 import { HOOK_MARK } from './hooks/useForm';
-import { calcFieldValue, concatNamePath, normalizeNamePath } from './utils';
+import { calcFieldValue, concatName, convertNameToArray, swap } from './utils';
 
 import type { FormItemInstance } from './FormItem';
 import type { FormListField, FormListFieldOperation, NamePath, TdFormListProps } from './type';
@@ -23,8 +23,8 @@ const FormList: React.FC<TdFormListProps> = (props) => {
   const { fullPath: parentFullPath, initialData: parentInitialData } = useFormListContext();
 
   const fullPath = useMemo(() => {
-    const normalizedName = normalizeNamePath(name);
-    const normalizedParentPath = normalizeNamePath(parentFullPath);
+    const normalizedName = convertNameToArray(name);
+    const normalizedParentPath = convertNameToArray(parentFullPath);
     // 如果没有父路径，直接使用 name
     if (normalizedParentPath.length === 0) {
       return normalizedName;
@@ -36,34 +36,36 @@ const FormList: React.FC<TdFormListProps> = (props) => {
       normalizedParentPath.every((segment, index) => normalizedName[index] === segment);
     if (isAbsolutePath) return normalizedName;
     // 如果是相对路径，与父路径拼接
-    return concatNamePath(parentFullPath, name);
+    return concatName(parentFullPath, name);
   }, [parentFullPath, name]);
 
   const initialData = useMemo(() => {
     let propsInitialData;
     if (props.initialData) {
       propsInitialData = props.initialData;
     } else if (parentFullPath && parentInitialData) {
-      const relativePath = fullPath.slice(normalizeNamePath(parentFullPath).length);
+      const relativePath = fullPath.slice(convertNameToArray(parentFullPath).length);
       propsInitialData = get(parentInitialData, relativePath);
     } else {
       propsInitialData = get(initialDataFromForm, fullPath);
     }
-    return propsInitialData;
+    return cloneDeep(propsInitialData);
   }, [fullPath, parentFullPath, initialDataFromForm, parentInitialData, props.initialData]);
 
   const [formListValue, setFormListValue] = useState(() => get(form?.store, fullPath) || initialData || []);
   const [fields, setFields] = useState<FormListField[]>(() =>
-    formListValue?.map((data, index) => ({
+    formListValue.map((data, index) => ({
       data: { ...data },
       key: (globalKey += 1),
       name: index,
       isListField: true,
     })),
   );
 
-  const formListMapRef = useRef<Map<NamePath, React.RefObject<FormItemInstance>>>(new Map());
+  // 暴露给 Form 的引用当前 FormList 实例
   const formListRef = useRef<FormItemInstance>(null);
+  // 存储当前 FormList 下所有的 FormItem 实例
+  const formListMapRef = useRef<Map<NamePath, React.RefObject<FormItemInstance>>>(new Map());
 
   const snakeName = []
     .concat(name)
@@ -72,88 +74,56 @@ const FormList: React.FC<TdFormListProps> = (props) => {
 
   const isMounted = useRef(false);
 
-  const buildDefaultFieldMap = () => {
-    if (formListMapRef.current.size <= 0) return {};
-    const defaultValues: Record<string, any> = {};
-    formListMapRef.current.forEach((_, itemPath) => {
-      const itemPathArray = normalizeNamePath(itemPath);
-      if (itemPathArray.length !== normalizeNamePath(fullPath).length + 2) return;
-      const fieldName = itemPathArray[itemPathArray.length - 1];
-      // add 没有传参时，构建一个包含所有子字段名称的对象，用 undefined 作为值，仅用于占位，确保回调给用户的数据结构完整
-      defaultValues[fieldName] = undefined;
-    });
-    return defaultValues;
+  const updateFormList = (newFields: any, newFormListValue: any) => {
+    const normalizedFields = newFields.map((f, index) => ({
+      ...f,
+      name: index, // 重新规范 name 索引
+    }));
+    setFields(normalizedFields);
+    setFormListValue(newFormListValue);
+    set(form?.store, fullPath, newFormListValue);
+    const changeValue = calcFieldValue(fullPath, newFormListValue);
+    onFormItemValueChange?.(changeValue);
   };
 
   const operation: FormListFieldOperation = {
     add(defaultValue?: any, insertIndex?: number) {
-      const cloneFields = [...fields];
-      const index = insertIndex ?? cloneFields.length;
-      cloneFields.splice(index, 0, {
+      const newFields = cloneDeep(fields);
+      const index = insertIndex ?? newFields.length;
+
+      newFields.splice(index, 0, {
         key: (globalKey += 1),
         name: index,
         isListField: true,
       });
-      cloneFields.forEach((field, index) => Object.assign(field, { name: index }));
-      setFields(cloneFields);
-
-      const nextFormListValue = cloneDeep(formListValue);
-
-      let finalValue = defaultValue;
-      if (finalValue === undefined) {
-        finalValue = buildDefaultFieldMap();
-      }
-      if (finalValue) {
-        nextFormListValue?.splice(index, 0, cloneDeep(finalValue));
-        setFormListValue(nextFormListValue);
-      }
-
-      set(form?.store, fullPath, nextFormListValue);
-      const newPath = [...normalizeNamePath(fullPath), index];
-      const fieldValue = calcFieldValue(newPath, finalValue);
-      onFormItemValueChange?.(fieldValue);
+
+      const newFormListValue = cloneDeep(formListValue).splice(index, 0, cloneDeep(defaultValue));
+
+      updateFormList(newFields, newFormListValue);
     },
     remove(index: number | number[]) {
-      const indices = Array.isArray(index) ? index : [index];
-
-      const nextFields = fields
-        .filter((item) => !indices.includes(item.name))
-        .map((field, i) => ({ ...field, name: i }));
-      setFields(nextFields);
-
-      const nextFormListValue = cloneDeep(formListValue).filter((_, idx) => !indices.includes(idx));
-      setFormListValue(nextFormListValue);
-      if (nextFormListValue.length) {
-        set(form?.store, fullPath, nextFormListValue);
-      }
-      const fieldValue = calcFieldValue(fullPath, nextFormListValue);
-      onFormItemValueChange?.(fieldValue);
+      const indices = castArray(index);
+
+      const newFields = fields.filter((f) => !indices.includes(f.name));
+      const newFormListValue = cloneDeep(formListValue).filter((_, i) => !indices.includes(i));
+
+      updateFormList(newFields, newFormListValue);
     },
+
     move(from: number, to: number) {
-      const cloneFields = [...fields];
-      const fromItem = { ...cloneFields[from] };
-      const toItem = { ...cloneFields[to] };
-      cloneFields[to] = fromItem;
-      cloneFields[from] = toItem;
-      set(form?.store, fullPath, []);
-      setFields(cloneFields);
-    },
-  };
+      const newFields = cloneDeep(fields);
+      const newFormListValue = cloneDeep(formListValue);
 
-  const handleFieldUpdateTasks = (fieldData: any[], callback: Function) => {
-    Array.from(formListMapRef.current.values()).forEach((formItemRef) => {
-      if (!formItemRef.current) return;
-      const { name: childName } = formItemRef.current;
-      const data = get(fieldData, childName);
-      if (data !== undefined) callback(formItemRef, data);
-    });
-    const fieldValue = calcFieldValue(fullPath, fieldData);
-    onFormItemValueChange?.(fieldValue);
+      swap(newFields, from, to);
+      swap(newFormListValue, from, to);
+
+      updateFormList(newFields, newFormListValue);
+    },
   };
 
   function setListFields(fieldData: any[], callback: Function) {
-    const currList = get(form?.store, fullPath) || [];
-    if (isEqual(currList, fieldData)) return;
+    const currList = get(form?.store, fullPath);
+    if (isEqual([currList], fieldData)) return;
 
     const newFields = fieldData.map((_, index) => {
       const currField = fields[index];
@@ -167,15 +137,19 @@ const FormList: React.FC<TdFormListProps> = (props) => {
       };
     });
 
-    setFields(newFields);
-    set(form?.store, fullPath, fieldData);
-    handleFieldUpdateTasks(fieldData, callback);
+    Array.from(formListMapRef.current.values()).forEach((formItemRef) => {
+      if (!formItemRef.current) return;
+      const { name: childName } = formItemRef.current;
+      const data = get(fieldData, childName);
+      if (data !== undefined) callback(formItemRef, data);
+    });
+
+    updateFormList(newFields, fieldData);
   }
 
   useEffect(() => {
     if (!name || !formMapRef) return;
     formMapRef.current.set(fullPath, formListRef);
-
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       formMapRef.current.delete(fullPath);
diff --git a/packages/components/form/hooks/useInstance.tsx b/packages/components/form/hooks/useInstance.tsx
@@ -1,7 +1,7 @@
 import { cloneDeep, get, isEmpty, isFunction, merge, set } from 'lodash-es';
 import log from '@tdesign/common-js/log/index';
 import useConfig from '../../hooks/useConfig';
-import { calcFieldValue, findFormItem, findFormItemDeep, objectToArray, travelMapFromObject } from '../utils';
+import { calcFieldValue, findFormItem, objectToArray, travelMapFromObject } from '../utils';
 
 import type { FormItemInstance } from '../FormItem';
 import type {
@@ -110,10 +110,7 @@ export default function useInstance(
   // 对外方法，获取对应 formItem 的值
   function getFieldValue(name: NamePath) {
     if (!name) return null;
-    let formItemRef = findFormItem(name, formMapRef);
-    if (!formItemRef) {
-      formItemRef = findFormItemDeep(name, formMapRef);
-    }
+    const formItemRef = findFormItem(name, formMapRef);
     return formItemRef?.current?.getValue?.();
   }
 
@@ -155,10 +152,7 @@ export default function useInstance(
     const nameLists = objectToArray(fields);
     nameLists.forEach((nameList) => {
       const fieldValue = get(fields, nameList);
-      let formItemRef = findFormItem(nameList, formMapRef);
-      if (!formItemRef) {
-        formItemRef = findFormItemDeep(nameList, formMapRef);
-      }
+      const formItemRef = findFormItem(nameList, formMapRef);
       if (formItemRef?.current) {
         formItemRef.current.setValue?.(fieldValue);
       } else {
@@ -173,10 +167,7 @@ export default function useInstance(
 
     fields.forEach((field) => {
       const { name, ...restFields } = field;
-      let formItemRef = findFormItem(name, formMapRef);
-      if (!formItemRef) {
-        formItemRef = findFormItemDeep(name, formMapRef);
-      }
+      const formItemRef = findFormItem(name, formMapRef);
       formItemRef?.current?.setField(restFields);
     });
   }
@@ -190,10 +181,7 @@ export default function useInstance(
     } else {
       const { type = 'initial', fields = [] } = params;
       fields.forEach((name) => {
-        let formItemRef = findFormItem(name, formMapRef);
-        if (!formItemRef) {
-          formItemRef = findFormItemDeep(name, formMapRef);
-        }
+        const formItemRef = findFormItem(name, formMapRef);
         formItemRef?.current?.resetField(type);
       });
     }
@@ -213,12 +201,8 @@ export default function useInstance(
       });
     } else {
       if (!Array.isArray(fields)) throw new TypeError('The parameter of "clearValidate" must be an array');
-
       fields.forEach((name) => {
-        let formItemRef = findFormItem(name, formMapRef);
-        if (!formItemRef) {
-          formItemRef = findFormItemDeep(name, formMapRef);
-        }
+        const formItemRef = findFormItem(name, formMapRef);
         formItemRef?.current?.resetValidate();
       });
     }
@@ -242,10 +226,7 @@ export default function useInstance(
         ? [...formMapRef.current.values()]
         : fields
             .map((name) => {
-              let formItemRef = findFormItem(name, formMapRef);
-              if (!formItemRef) {
-                formItemRef = findFormItemDeep(name, formMapRef);
-              }
+              const formItemRef = findFormItem(name, formMapRef);
               return formItemRef;
             })
             .filter(Boolean);
diff --git a/packages/components/form/utils/index.ts b/packages/components/form/utils/index.ts
