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

[cccnoob]

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

[github-actions]

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

[l123wx]

重现链接访问不了，是不是配置了权限限制？

[cccnoob]

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

重现链接访问不了，是不是配置了权限限制？

[l123wx]

两个问题导致的：

1. FormList fields 的 key 每次 setFields 时不管 value 有没有变化都会递增，导致里面的 FormItem 重新渲染

tdesign-react/src/form/FormList.tsx

Lines 10 to 14 in bdef4e9

	let key = 0;
	const FormList: React.FC<TdFormListProps> = (props) => {
	const {

tdesign-react/src/form/FormList.tsx

Lines 100 to 111 in bdef4e9

	// 外部设置 fields 优先级最高，可以更改渲染的节点
	function setListFields(fieldData: any[], callback: Function, originData) {
	setFields(
	fieldData.map((_, index) => ({
	key: (key += 1),
	name: index,
	isListField: true,
	})),
	);
	// 添加至队列中 等待下次渲染完成执行对应逻辑
	fieldsTaskQueueRef.current.push({ callback, fieldData, originData });
	}

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

tdesign-react/src/select/hooks/useOptions.ts

Lines 16 to 19 in bdef4e9

	const [valueToOption, setValueToOption] = useState({});
	const [currentOptions, setCurrentOptions] = useState([]);
	const [tmpPropOptions, setTmpPropOptions] = useState([]);
	const [selectedOptions, setSelectedOptions] = useState([]);

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

[l123wx]

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

[cccnoob]

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

关于form.reset 这个方法，在formlist 中存在 重复值的问题

先删除表单中一行，然后点击 setVal, 会出现 重复的数据

具体代码请看
https://codesandbox.io/p/sandbox/magical-frost-q28kqm

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

[l123wx]

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

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

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

好，这个我也会顺带看看

[l123wx]

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

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

[l123wx]

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

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

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

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