ant-design / ant-design/pro-components
🐛[BUG]transform 函数没调用
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看：
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🐛 bug 描述
表单提交，期望如果是单选的时候，通过 transform 也能返回 items[0].answerData.keys 是一个字符串数组
但是 transform 没调用
### 📷 复现步骤
`
import {
ProForm,
ProFormSelect,
ProFormList,
ProFormText,
} from '@ant-design/pro-components';
// 假设 isMultiple 是一个可以切换的变量
const isMultiple = true;
const MyExamForm = () => {
return (
{
console.log('表单提交的最终值:', values);
}}
initialValues={{
// 模拟已有的数据
items: [
{
question: '以下哪些是前端框架？',
optionData: {
items: ['React', 'Vue', 'Angular', 'Svelte'],
},
answerData: {
keys: ['A', 'B'], // 初始值也应该是字符串数组
},
},
],
}}
>
{(meta, itemIdx, action) => (
{/* 选项的输入，这里只是为了演示 dependency */}
{(field) => }
{/* 你的核心组件：答案选择 */}
{
// params 的结构是 { items: [...] }
// 从依赖中安全地获取选项数据
const optionItems = params?.items?.[itemIdx]?.optionData?.items;
if (!optionItems || optionItems.length === 0) {
return [];
}
const options = optionItems.map((_, index) => {
const optionLabelAndValue = String.fromCharCode(65 + index);
// 关键修改：让 value 和 label 都为 'A', 'B' 等
return {
label: optionLabelAndValue,
value: optionLabelAndValue,
};
});
console.log(`问题 ${itemIdx + 1} 的选项已生成:`, options);
return options;
}}
mode={isMultiple ? 'multiple' : undefined}
placeholder="请选择答案"
// 关键修改：正确实现 transform
transform={(value) => {
console.log(`提交前，问题 ${itemIdx + 1} 的答案原始值:`, value);
// 确保最终提交的是一个数组
if (!value) {
return []; // 如果没选，提交空数组
}
return Array.isArray(value) ? value : [value];
}}
/>
)}
);
};
export default MyExamForm;
`
### 🏞 期望结果
transform 没调用
### 💻 复现代码
### © 版本信息
- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
### 🚑 其他信息
Contributor guide
Research direction
Start with the provided MyExamForm reproduction, focusing on the nested ProFormSelect inside ProFormList and its transform callback. Trace form submission and transform handling, then verify that submitting both single- and multiple-selection values invokes transform and produces the expected string-array value.
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
- 35/100