pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG]transform 函数没调用

Open gaspire opened this issue 6 months ago • 1 comments

提问前先看看:

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]

🚑 其他信息

gaspire avatar Jun 11 '25 13:06 gaspire

一样的

haobarry avatar Sep 12 '25 16:09 haobarry