ant-design / ant-design/pro-components
🐛[BUG] [ProForm] Form.useWatch returns object format ({0: {}}) instead of array ([{}]) after form reset
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
在 ProForm 中使用 Form.useWatch 监听数组类型的字段时,当表单被重置(reset)后,数组类型的值会被错误地转换成对象格式。
例如:原本的 `[{}]` 会变成 `{0: {}}`,这导致后续的数组操作出现异常。
### 📷 复现步骤
1. 创建一个包含数组字段的 ProForm
2. 使用 Form.useWatch 监听该数组字段
3. 调用 form.resetFields()
4. 观察 useWatch 返回的值变成了对象格式
### 🏞 期望结果
表单重置后,数组字段应该保持数组格式 `[{}]`,而不是变成对象格式 `{0: {}}`。
### 💻 复现代码
[demo codesandbox](https://codesandbox.io/p/sandbox/upbeat-fog-34jrlg?file=%2FApp.tsx%3A38%2C20)
1. 点击 [添加一行数据]
2. 点击[重置]
3. 打开 Console
### © 版本信息
- ProComponents: 2.8.3
- Ant Design: 5.x
- React: 18.x
- 浏览器环境: Chrome 最新版
- 开发环境: macOS/Windows
### 🚑 其他信息
问题似乎出在 BaseForm.tsx 中的 transformKey 函数处理过程。在表单重置时,通过 onValuesChange 触发的值转换过程中,数组被错误地转换成了对象格式。
相关源码:
https://github.com/ant-design/pro-components/blob/master/packages/form/src/BaseForm/BaseForm.tsx#L809-L814
https://github.com/ant-design/pro-components/blob/master/packages/utils/src/transformKeySubmitValue/index.ts
@chenshuai2144 @Wxh16144
Contributor guide
Research direction
Start with the reset reproduction in the linked CodeSandbox, then inspect transformKey in packages/form/src/BaseForm/BaseForm.tsx and packages/utils/src/transformKeySubmitValue/index.ts. Trace the onValuesChange path during form.resetFields(); done means Form.useWatch preserves the array shape [ {} ] rather than returning {0: {}} after reset.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100