tdesign-react
tdesign-react copied to clipboard
[Form] FormList 使用 form.setFieldsValue时,里面 select 闪动。
tdesign-react 版本
1.10.0
重现链接
https://codesandbox.io/p/sandbox/tdesign-react-demo-forked-rkhdns?workspaceId=099306a3-a4c4-4984-8128-a0fd86c9d631
重现步骤
重复 点击setVal 按钮,表单中的 select 闪动。
期望结果
No response
实际结果
No response
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
👋 @cccnoob,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。
重现链接访问不了,是不是配置了权限限制?
试下这个 https://codesandbox.io/p/sandbox/tdesign-react-demo-forked-n4dq28
重现链接访问不了,是不是配置了权限限制?
两个问题导致的:
- FormList fields 的 key 每次 setFields 时不管 value 有没有变化都会递增,导致里面的 FormItem 重新渲染
https://github.com/Tencent/tdesign-react/blob/bdef4e9245496d93270416cd1b66a1a99fe1f4a5/src/form/FormList.tsx#L10-L14
https://github.com/Tencent/tdesign-react/blob/bdef4e9245496d93270416cd1b66a1a99fe1f4a5/src/form/FormList.tsx#L100-L111
- Select 渲染时 selectedLabel 初始值是空,在 useEffect 回调后才会计算出值,所以 Select 在渲染时会先短暂的显示 "请选择"
https://github.com/Tencent/tdesign-react/blob/bdef4e9245496d93270416cd1b66a1a99fe1f4a5/src/select/hooks/useOptions.ts#L16-L19
↑↑↑ 在这里应该初始化 selectedOptions 和其他 state 的值 ↑↑↑
我今天晚上会先提一个 pr 修复 Select 的问题
多谢,后面我在看看。 不过,我又发现了一个新的bug。
关于form.reset 这个方法,在formlist 中存在 重复值的问题
先删除表单中一行,然后点击 setVal, 会出现 重复的数据
具体代码请看
https://codesandbox.io/p/sandbox/magical-frost-q28kqm
我今天晚上会先提一个 pr 修复 Select 的问题
多谢,后面我在看看。 不过,我又发现了一个新的bug。
关于form.reset 这个方法,在formlist 中存在 重复值的问题
先删除表单中一行,然后点击 setVal, 会出现 重复的数据
具体代码请看 codesandbox.io/p/sandbox/magical-frost-q28kqm
我今天晚上会先提一个 pr 修复 Select 的问题
好,这个我也会顺带看看
select/hooks/useOptions.ts 的代码看下来,有一些地方我想重构一下,比如:valueToOption 和 selectedOptions 感觉没必要用 state 来保存?还有一些地方的类型有点不是很清晰。因为这里涉及到比较多的逻辑,还要把 Select 的其他部分代码再熟悉一下,所以我可能过几天再提这个pr
最简单的解决办法:把 useEffect 里的方法封装成函数,在 useState 调用时先设置 initialData,确保 selectedOptions 不为空
多谢,后面我在看看。 不过,我又发现了一个新的bug。
关于form.reset 这个方法,在formlist 中存在 重复值的问题
先删除表单中一行,然后点击 setVal, 会出现 重复的数据
具体代码请看 codesandbox.io/p/sandbox/magical-frost-q28kqm
我今天晚上会先提一个 pr 修复 Select 的问题
这个问题我开一个新的 issue 吧

先删除表单中一行,然后点击 setVal, 会出现 重复的数据
具体代码请看
先删除表单中一行,然后点击 setVal, 会出现 重复的数据
具体代码请看