tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

[Form] FormList 使用 form.setFieldsValue时,里面 select 闪动。

Open cccnoob opened this issue 1 year ago • 9 comments

tdesign-react 版本

1.10.0

重现链接

https://codesandbox.io/p/sandbox/tdesign-react-demo-forked-rkhdns?workspaceId=099306a3-a4c4-4984-8128-a0fd86c9d631

重现步骤

image image

重复 点击setVal 按钮,表单中的 select 闪动。

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

cccnoob avatar Nov 19 '24 11:11 cccnoob

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

github-actions[bot] avatar Nov 19 '24 11:11 github-actions[bot]

重现链接访问不了,是不是配置了权限限制?

image

l123wx avatar Nov 28 '24 03:11 l123wx

试下这个 https://codesandbox.io/p/sandbox/tdesign-react-demo-forked-n4dq28

重现链接访问不了,是不是配置了权限限制?

image

cccnoob avatar Nov 28 '24 06:11 cccnoob

两个问题导致的:

  1. 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

  1. Select 渲染时 selectedLabel 初始值是空,在 useEffect 回调后才会计算出值,所以 Select 在渲染时会先短暂的显示 "请选择"

https://github.com/Tencent/tdesign-react/blob/bdef4e9245496d93270416cd1b66a1a99fe1f4a5/src/select/hooks/useOptions.ts#L16-L19

↑↑↑ 在这里应该初始化 selectedOptions 和其他 state 的值 ↑↑↑

l123wx avatar Dec 03 '24 09:12 l123wx

我今天晚上会先提一个 pr 修复 Select 的问题

l123wx avatar Dec 03 '24 09:12 l123wx

多谢,后面我在看看。 不过,我又发现了一个新的bug。

关于form.reset 这个方法,在formlist 中存在 重复值的问题 image 先删除表单中一行,然后点击 setVal, 会出现 重复的数据 image 具体代码请看 https://codesandbox.io/p/sandbox/magical-frost-q28kqm

我今天晚上会先提一个 pr 修复 Select 的问题

cccnoob avatar Dec 03 '24 11:12 cccnoob

多谢,后面我在看看。 不过,我又发现了一个新的bug。

关于form.reset 这个方法,在formlist 中存在 重复值的问题 image 先删除表单中一行,然后点击 setVal, 会出现 重复的数据 image 具体代码请看 codesandbox.io/p/sandbox/magical-frost-q28kqm

我今天晚上会先提一个 pr 修复 Select 的问题

好,这个我也会顺带看看

l123wx avatar Dec 03 '24 11:12 l123wx

select/hooks/useOptions.ts 的代码看下来,有一些地方我想重构一下,比如:valueToOption 和 selectedOptions 感觉没必要用 state 来保存?还有一些地方的类型有点不是很清晰。因为这里涉及到比较多的逻辑,还要把 Select 的其他部分代码再熟悉一下,所以我可能过几天再提这个pr

最简单的解决办法:把 useEffect 里的方法封装成函数,在 useState 调用时先设置 initialData,确保 selectedOptions 不为空

image

image

l123wx avatar Dec 03 '24 16:12 l123wx

多谢,后面我在看看。 不过,我又发现了一个新的bug。

关于form.reset 这个方法,在formlist 中存在 重复值的问题 image 先删除表单中一行,然后点击 setVal, 会出现 重复的数据 image 具体代码请看 codesandbox.io/p/sandbox/magical-frost-q28kqm

我今天晚上会先提一个 pr 修复 Select 的问题

这个问题我开一个新的 issue 吧

l123wx avatar Dec 04 '24 07:12 l123wx