[Form] 动态设置级联表单无法数据预填

[DevQiao]

tdesign-react 版本

1.8

重现链接

https://stackblitz.com/edit/react-mdcobx-3txpta?file=src%2Fdemo.tsx

重现步骤

No response

期望结果

看下 Antd 的效果 https://stackblitz.com/edit/react-xqhb4t?file=demo.tsx

实际结果

动态级联渲染的 FormItem 无法预填数据，每多一层级，就需要重新 set 一次

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

Pretty Critical!

[github-actions]

👋 @DevQiao，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[l123wx]

导致这个问题的原因是，tdesign 不是跟 antd 一样在 Form 组件中维护一个统一的 formData 来储存整个表单的值，而是在 FormItem 中使用 state 存储各自的值。

使用 setFieldsValue 设置表单值时，会直接调用 FormItem 的 setValue 方法。所以当组件还没渲染时，没办法调用组件的 setValue 方法

function setFieldsValue(fields = {}) {
	travelMapFromObject(fields, formMapRef, (formItemRef, fieldValue) => {
		formItemRef?.current?.setValue?.(fieldValue, fields);
	});
}

[l123wx]

如果要改成在 Form 中使用统一的 formData 来管理表单的值，这个改动会有点大。

我的想法是：

使用 useRef 创建一个 游离（临时）字段值对象记录这种数据，当调用 setFieldsValue 时，如果目标字段组件还不存在，就记录到游离对象中。如果组件不存在，并且对应字段的游离值已经存在，更新游离值。

在组件渲染时，判断是否存在该字段的游离值，如果存在就作为 initialValue。当组件使用过这个游离值后，将这个值从游离对象中删除。

当 Form 重置或卸载时，将游离对象清空

不知道这个方法有没有什么问题 @HaixingOoO

[HaixingOoO]

如果要改成在 Form 中使用统一的 formData 来管理表单的值，这个改动会有点大。

我的想法是：

使用 useRef 创建一个 游离（临时）字段值对象记录这种数据，当调用 setFieldsValue 时，如果目标字段组件还不存在，就记录到游离对象中。如果组件不存在，并且对应字段的游离值已经存在，更新游离值。

在组件渲染时，判断是否存在该字段的游离值，如果存在就作为 initialValue。当组件使用过这个游离值后，将这个值从游离对象中删除。

当 Form 重置或卸载时，将游离对象清空

不知道这个方法有没有什么问题 @HaixingOoO

需要測試一下，欢迎PR!!!

[l123wx]

好，那我往这个方向试一下~