🐛[BUG] 在ProFromList下的ProFormDatePicker组件中使用transform不生效

[narutohinata]

trafficstars

🐛 bug 描述

我在ProFormList里使用了ProFormDatePicker组件，期望提交时候能把时间字符串转换成unix时间戳，于是用了transform来转换数据， 但是并没有生效，里面的数据还是未转换前的数据。

📷 复现步骤

<ProForm
      onFinish={(value) => {
        console.log(value);
        return;
      }}
    >
      <ProFormDatePicker
        name="date"
        
        transform={(value) => {
          return {
            date: moment(value).unix()
          };
        }}
      />
      <ProFormList name="datas">
        {() => {
          return (
            <ProFormDatePicker
              name="date"
              transform={(value) => {
                return {
                  date: moment(value).unix()
                };
              }}
            />
          );
        }}
      </ProFormList>
    </ProForm>

🏞 期望结果

期望结果是

{
   datas: [{date: 1658332800}],
   date: 1658332800,
}

但是实际得到的结果是

{
   datas: [{date: '2022-07-23' }],
   date: 1658332800,
}

💻 复现代码

https://codesandbox.io/s/cha-xun-biao-ge-forked-7cyius?file=/App.tsx:192-810

© 版本信息

• ProComponents 版本: 1.1.11
• umi 版本 umi3 ^3.5.0
• 浏览器环境 Chromer 103.0.5060.114
• 开发环境 Win10

[narutohinata]

https://github.com/ant-design/pro-components/issues/3531 不知道为啥这个issue为啥close了, 问题并没有修复，升到最新版本还是能复现问题。

[soradaisuke]

遇到同样的问题，transform可以设置到ProFormList上，但是无法设置到被他包裹的组件上 https://github.com/ant-design/pro-components/blob/e71c827f9dc8b3672410e1de0e9b9a3c9957320d/packages/utils/src/transformKeySubmitValue/index.ts

貌似是这里没有处理itemValue是数组的情况，所以直接在list这一层就transform了？

[ratelgogo]

+1

[narutohinata]

PR https://github.com/ant-design/pro-components/pull/5759 确实解决了单层ProFromList下的组件transform不生效的bug, 但是当多层嵌套ProFromList的时候，transform方法依然无法生效。代码如下：

<ProForm
      onFinish={(value) => {
        console.log(value);
        return;
      }}
    >
      <ProFormDatePicker
        name="date"
        transform={(value) => {
          return {
            date: moment(value).unix()
          };
        }}
      />
      <ProFormList name="datas">
        {() => {
          return (
            <ProFormList name="datas2">
              {
                () => {
                  return  <ProFormDatePicker
                  name="date"
                  transform={(value) => {
                    return {
                      date: moment(value).unix()
                    };
                  }}
                />
                }
              }
            </ProFormList>
          );
        }}
      </ProFormList>
    </ProForm>

期望结果是：

{
   datas: [ { datas2: {date: 1658332800} } ],
   date: 1658332800,
}

但是实际得到的结果是

{
   datas: [ { datas2: {date: "2022-10-27 10:57:06"} } ],
   date: 1658332800,
}