🐛[BUG]transform 函数没调用
提问前先看看:
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 (
<ProForm
onFinish={async (values) => {
console.log('表单提交的最终值:', values);
}}
initialValues={{
// 模拟已有的数据
items: [
{
question: '以下哪些是前端框架?',
optionData: {
items: ['React', 'Vue', 'Angular', 'Svelte'],
},
answerData: {
keys: ['A', 'B'], // 初始值也应该是字符串数组
},
},
],
}}
>
<ProFormList name="items">
{(meta, itemIdx, action) => (
<div key={itemIdx} style={{ marginBottom: 16, border: '1px solid #eee', padding: 16 }}>
<ProFormText
name={[itemIdx, 'question']}
label={问题 ${itemIdx + 1}}
/>
{/* 选项的输入,这里只是为了演示 dependency */}
<ProFormList name={[itemIdx, 'optionData', 'items']}>
{(field) => <ProFormText name={field.name} label={`选项 ${String.fromCharCode(65 + field.name)}`} />}
</ProFormList>
{/* 你的核心组件:答案选择 */}
<ProFormSelect
label="答案"
name={['items', itemIdx, 'answerData', 'keys']}
// 依赖于选项列表的变化
dependencies={[['items', itemIdx, 'optionData', 'items']]}
request={async (params) => {
// 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];
}}
/>
</div>
)}
</ProFormList>
</ProForm>
); };
export default MyExamForm; `
🏞 期望结果
transform 没调用
💻 复现代码
© 版本信息
- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息
一样的