[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 重新渲染

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 }); 
        
           }

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 的值 ↑↑↑

我今天晚上会先提一个 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 吧


	let key = 0;

	const FormList: React.FC<TdFormListProps> = (props) => {
	const {

	// 外部设置 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 });
	}

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