fix(Form): setFieldsValue failed in custom controlled form

Author: RylanBot

packages/components/form/_example/customized-form-controls.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Form, Input, Button, MessagePlugin, Space, Select } from 'tdesign-react';
-import type { FormProps } from 'tdesign-react';
+import { Button, Form, Input, Select, Space } from 'tdesign-react';
 
 interface ICourseSelect {
   value?: {
@@ -27,13 +26,24 @@ function CourseSelect(props: ICourseSelect) {
             label: '英语',
             value: 'english',
           },
+          {
+            label: '计算机',
+            value: 'computer',
+          },
         ]}
         value={value?.type}
         onChange={(v) => {
+          // type 改变时，清空 name
           onChange?.({
-            ...value,
             type: v as string,
+            name: '',
           });
+
+          // type 改变时，保留 name
+          // onChange?.({
+          //   ...value,
+          //   type: v as string,
+          // });
         }}
         placeholder="请选择课程类型"
       />
@@ -54,21 +64,23 @@ function CourseSelect(props: ICourseSelect) {
 export default function BaseForm() {
   const [form] = Form.useForm();
 
-  const onSubmit: FormProps['onSubmit'] = (e) => {
-    console.log(e);
-    if (e.validateResult === true) {
-      MessagePlugin.info('提交成功');
-    }
-  };
-
   return (
-    <Form form={form} onSubmit={onSubmit} colon labelWidth={100}>
+    <Form form={form} colon labelWidth={100}>
       <FormItem label="课程" name="course">
         <CourseSelect />
       </FormItem>
       <FormItem style={{ marginLeft: 100 }}>
-        <Button type="submit" theme="primary">
-          提交
+        <Button
+          onClick={() => {
+            form.setFieldsValue({
+              course: {
+                type: 'computer',
+                name: '操作系统',
+              },
+            });
+          }}
+        >
+          设置数据
         </Button>
       </FormItem>
     </Form>

packages/components/form/hooks/useInstance.tsx

@@ -1,7 +1,7 @@
-import { cloneDeep, get, isEmpty, isFunction, merge, set } from 'lodash-es';
+import { cloneDeep, isArray, isEmpty, isFunction, isObject, merge, set } from 'lodash-es';
 import log from '@tdesign/common-js/log/index';
 import useConfig from '../../hooks/useConfig';
-import { calcFieldValue, findFormItem, objectToArray, travelMapFromObject } from '../utils';
+import { calcFieldValue, findFormItem, travelMapFromObject } from '../utils';
 
 import type { FormItemInstance } from '../FormItem';
 import type {
@@ -149,16 +149,27 @@ export default function useInstance(
 
   // 对外方法，设置对应 formItem 的值
   function setFieldsValue(fields = {}) {
-    const nameLists = objectToArray(fields);
-    nameLists.forEach((nameList) => {
-      const fieldValue = get(fields, nameList);
-      const formItemRef = findFormItem(nameList, formMapRef);
+    const setValueByPath = (value: any, path: (string | number)[] = []) => {
+      // 当前路径对应的 FormItem 存在，直接设置
+      const formItemRef = findFormItem(path, formMapRef);
       if (formItemRef?.current) {
-        formItemRef.current.setValue?.(fieldValue);
+        formItemRef.current.setValue?.(value);
+        return;
+      }
+
+      // 递归处理对象
+      // { user: { name: '' } } => [['user', 'name']]
+      // { user: [{ name: '' }]} => [['user']]
+      if (isObject(value) && !isArray(value) && !isEmpty(value)) {
+        Object.keys(value).forEach((key) => {
+          setValueByPath(value[key], [...path, key]);
+        });
       } else {
-        set(floatingFormDataRef.current, nameList, fieldValue);
+        set(floatingFormDataRef.current, path, value);
       }
-    });
+    };
+
+    setValueByPath(fields);
   }
 
   // 对外方法，设置对应 formItem 的数据

packages/components/form/utils/index.ts

@@ -1,4 +1,4 @@
-import { get, has, isArray, isEmpty, isObject } from 'lodash-es';
+import { get, has } from 'lodash-es';
 import type { FormItemInstance } from '../FormItem';
 import type { NamePath } from '../type';
 
@@ -62,26 +62,6 @@ function findFormItemDeep(
   }
 }
 
-// { user: { name: '' } } => [['user', 'name']]
-// 不处理数组类型
-// { user: [{ name: '' }]} => [['user']]
-export function objectToArray(obj: Record<string | number, any>) {
-  const result: (string | number)[][] = [];
-
-  function traverse(current: any, path: string[] = []) {
-    if (isObject(current) && !isArray(current) && !isEmpty(current)) {
-      Object.keys(current).forEach((key) => {
-        traverse(current[key], [...path, key]);
-      });
-    } else {
-      result.push(path);
-    }
-  }
-
-  traverse(obj);
-  return result;
-}
-
 export function calcFieldValue(name: NamePath, value: any, numericKeyAsIndex = true) {
   if (!Array.isArray(name)) return { [name]: value };
   let result: any = value;