🐛[BUG] 可复选下拉列表的transform返回值处理问题

cui-xxu commented 1 year ago

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

可复选下拉列表的transform，返回值覆盖了表单数据的name，而不是覆盖表单数据的value

📷 复现步骤

下述代码，“字典选择”选择“取值3，取值4”，点击“获取格式化后的所有数据”，打印结果应该是 dict1: val4,val3，实际是val4,val3: Array(2) 0: "val4" 1: "val3"

🏞 期望结果

打印结果应该是 dict1: val4,val3

💻 复现代码

import React from 'react'; import type { ProFormInstance } from '@ant-design/pro-components'; import { ProForm, ProFormDatePicker, ProFormSelect, ProFormText } from '@ant-design/pro-components'; import { Button, message } from 'antd'; import dayjs from 'dayjs'; import { useRef } from 'react';

const waitTime = (time: number = 100) => { return new Promise((resolve) => { setTimeout(() => { resolve(true); }, time); }); };

export default () => { const formRef = useRef(); const onFill = () => { formRef?.current?.setFieldsValue({ name: '张三', company: '蚂蚁金服', }); };

const getCompanyName = () => { message.info(公司名称为 "${formRef?.current?.getFieldValue('company')}"); };

const getFormatValues = () => { console.log('格式化后的所有数据：', formRef.current?.getFieldsFormatValue?.()); };

const validateAndGetFormatValue = () => { formRef.current?.validateFieldsReturnFormatValue?.().then((values) => { console.log('校验表单并返回格式化后的所有数据：', values); }); };

return ( <ProForm title="新建表单" formRef={formRef} submitter={{ render: (props, doms) => { return [ ...doms,

, , , ]; }, }} onFinish={async (values) => { await waitTime(2000); console.log(values); message.success('提交成功'); return true; }} > value?.split?.(",") || value} transform={(value: any) => value?.join?.(",") || value} /> ); }; ### © 版本信息 - ProComponents 版本: 2.3.46 - umi 版本 - 浏览器环境 - 开发环境 [e.g. mac OS] ### 🚑 其他信息

cui-xxu commented 1 year ago

补充说明：代码就是官网样例 https://procomponents.ant.design/components/form#form-formref 加了一个下拉框


<ProFormSelect
            key='dict1'
            name='dict1'
            label='字典选择'
            mode='multiple'
            valueEnum={{
              val1: '取值1',
              val2: '取值2',
              val3: '取值3',
              val4: '取值4',
              val5: '取值5',
            }}
            convertValue = {(value: any)=> value?.split?.(",") || value}
            transform={(value: any) => value?.join?.(",") || value}
          />

chenshuai2144 commented 1 year ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

根据您提供的信息，问题在于使用 transform 函数后，name 值被覆盖，只剩下了 value，导致不能正确提交表单数据。建议您调整一下 transform 的返回值为一个对象，其中包括 value 和 name，具体代码示例如下：

<ProFormSelect
  key='dict1'
  name='dict1'
  label='字典选择'
  mode='multiple'
  valueEnum={{
    val1: '取值1',
    val2: '取值2',
    val3: '取值3',
    val4: '取值4',
    val5: '取值5',
  }}
  convertValue={(value: any) => value?.split?.(",") || value}
  transform={(value: any) => {
    const selectedValues = value?.join?.(",") || value;
    return {
      value: selectedValues || undefined,
      name: 'dict1'
    }
  }}
/>

这样可以保证 name 和 value 均被正确的提交。

如果以上解决方案还不能解决您的问题，请提供更多详细信息或代码示例。

ant-design / pro-components