Tencent/tdesign-react

[Form] 调用 form.reset 后，FormList 组件下的值会出现重复的情况

Opened this issue · 3 comments

l123wx commented

tdesign-react 版本

1.10.0

重现链接

codesandbox.io/p/sandbox/magical-frost-q28kqm

重现步骤

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

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

期望结果

调用 reset 方法后，formList 下面的 formItem 能正确重置为初始值

实际结果

调用 reset 方法后，formList 下面的 formItem 出现值重复的情况

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

github-actions commented

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

l123wx commented

具体是 FormList callback fields 导致的问题，当调用 remove 方法移除一项后，剩余 fields 中 key 与移除前的一致，但是 name 重新 计算了，导致 reset 的时候删除项后的所有项获取到了原先前一项的值

image

原：

  • 北京 key: 1 name: 0
  • 上海 key: 2 name: 1
  • 广州 key: 3 name: 2
  • 深圳 key: 4 name: 3

移除第一项:

  • 上海 key: 2 name: 0
  • 广州 key: 3 name: 1
  • 深圳 key: 4 name: 2

reset:

  1. formItemRef?.current?.resetField?.():
  • 上海 key: 2 name: 0 => 北京
  • 广州 key: 3 name: 1 => 上海
  • 深圳 key: 4 name: 2 => 广州
  1. formList > setFields
  • ----- key: 1 name: 0 => 北京
  • 北京 key: 2 name: 1 => 北京
  • 广州 key: 3 name: 2 => 上海
  • 深圳 key: 4 name: 3 => 广州
l123wx commented

感觉得处理一下 FormList fields 的 key 这部分逻辑，包括 #3218 (comment) 提到的，每次调用 setFieldsValue，key 都会递增，导致 FormItem state 重置，组件重新渲染