ant-design / ant-design/pro-components

🐛[BUG] [ProForm] Form.useWatch returns object format ({0: {}}) instead of array ([{}]) after form reset

Open
#8,973 0 comments 0 reactions 0 assignees View on GitHub
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
Image

### © 版本信息

- 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.