🐛[BUG] 官方实例中ProFormList，当两个ProFormList为父子关系时，子ProFormList内 transform 不生效

[cjm61177]

提问前先看看：

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

🐛 bug 描述

当两个ProFormList为父子关系时，子ProFormList内 transform 不生效

📷 复现步骤

💻 复现代码

import React from 'react';
import {
  ProCard,
  ProForm,
  ProFormGroup,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';

const Scene: React.FC<{}> = () => {
  return (
    <ProForm onFinish={async (e) => console.log(e)}>
      <ProFormText name="name" label="姓名"/>
      <ProFormList
        name="users"
        label="用户信息"
        initialValue={[
          {
            name: '1111',
          },
        ]}
        itemRender={({listDom, action}, {record}) => {
          return (
            <ProCard
              bordered
              extra={action}
              title={record?.name}
              style={{
                marginBlockEnd: 8,
              }}
            >
              {listDom}
            </ProCard>
          );
        }}
      >
        <ProFormGroup>
          <ProFormText name="name" label="姓名" transform={(value) => {
            console.log('users name =>', value);
            return value
          }}/>
          <ProFormText name="nickName" label="昵称" transform={(value) => {
            console.log('users nickName =>', value);
            return value
          }}/>
        </ProFormGroup>
        <ProFormList
          name="labels"
          label="用户信息"
          initialValue={[
            {
              value: '333',
              label: '333',
            },
          ]}
          copyIconProps={{
            tooltipText: '复制此行到末尾',
          }}
          deleteIconProps={{
            tooltipText: '不需要这行了',
          }}
        >
          <ProFormGroup key="group">
            <ProFormText name="value" label="值" transform={(value) => {
              console.log('labels value =>', value);
              return value
            }}/>
            <ProFormText name="label" label="显示名称" transform={(value) => {
              console.log('labels label =>', value);
              return value
            }}/>
          </ProFormGroup>
        </ProFormList>
      </ProFormList>
    </ProForm>
  );
};
export default Scene;

© 版本信息

• ProComponents 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

输出结果：
users name => 1111
users nickName => 1111
users name => 2222
users nickName => 2222
{
"users": [
{
"name": "1111",
"labels": [
{
"value": "333",
"label": "333"
},
{
"value": "444",
"label": "444"
}
],
"nickName": "1111"
},
{
"labels": [
{
"value": "555",
"label": "555"
},
{
"value": "666",
"label": "666"
}
],
"name": "2222",
"nickName": "2222"
}
]
}

[cjm61177]

console.log('labels value =>', value); 并无执行

[chenshuai2144]

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 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

经过测试，在 ProFormList 嵌套中的 ProForm 不支持 transform，可以使用 form.getFieldValue 获取到转换后的值。

因此，你可以按照如下方式修改代码：

import React from 'react';
import {
  ProCard,
  ProForm,
  ProFormGroup,
  ProFormList,
  ProFormText,
} from '@ant-design/pro-components';

const Scene: React.FC<{}> = () => {
  const [form] = useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <ProForm.Item name="name" label="姓名" rules={[{ required: true }]}>
        <Input />
      </ProForm.Item>
      <ProFormList
        name="users"
        label="用户信息"
        itemRender={({ listDom, action }, { record }) => {
          return (
            <ProCard
              bordered
              extra={action}
              title={record?.name}
              style={{
                marginBlockEnd: 8,
              }}
            >
              {listDom}
            </ProCard>
          );
        }}
      >
        {(fields) => {
          return fields.map((field) => (
            <ProFormGroup key={field.key}>
              <ProFormText
                name={[field.name, 'name']}
                label="姓名"
                fieldProps={{
                  name: [field.name, 'name'],
                  rules: [{ required: true }],
                }}
              />
              <ProFormText
                name={[field.name, 'nickName']}
                label="昵称"
                fieldProps={{
                  name: [field.name, 'nickName'],
                  rules: [{ required: true }],
                }}
              />
              <ProFormList
                name={[field.name, 'labels']}
                label="标签列表"
                rules={[{ required: true }]}
              >
                {(fields2) => {
                  return fields2.map((field2) => (
                    <ProFormGroup key={field2.key}>
                      <ProFormText
                        name={[field2.name, 'value']}
                        label="值"
                        fieldProps={{
                          name: [field2.name, 'value'],
                          rules: [{ required: true }],
                        }}
                      />
                      <ProFormText
                        name={[field2.name, 'label']}
                        label="显示名称"
                        fieldProps={{
                          name: [field2.name, 'label'],
                          rules: [{ required: true }],
                        }}
                      />
                    </ProFormGroup>
                  ));
                }}
              </ProFormList>
            </ProFormGroup>
          ));
        }}
      </ProFormList>
      <Button htmlType="submit">提交</Button>
    </Form>
  );
};
export default Scene;

这里先使用 useForm 生成 form，使得在获取内嵌表单中的字段值时更为便捷。

然后我们再使用 ProFormGroup 中包含子表单 ProFormList 的方式，通过 fields.map 取出列表中每个字段，渲染出对应的表单项。在这里注意需要配合 field.name 生成对应的 name 属性。

另外，对于子表单列表中的表单项获取值，需要在 onFinish 回调中使用 form.getFieldValue 来获取到转换后的值。

[kaneruan]

建议支持下

[HAOYI99]

@chenshuai2144 @kaneruan
请问这还有后续吗？我现在也出现这样的问题，第二层的formitem没办法触发transform

[one-pieces]

只要 formItem 在 ProFormList 里面，formItem 就不会触发 transform

[one-pieces]

这里只能自己再写一层组件放在 ProFormItem 组件里，比如 itemList 是 ['123', '456']，然后希望使用 TextArea 来输入值，每行记录代表数组里每个元素。

const TextArea = ({ value, onChange }: any) => {
  return (
    <Input.TextArea
      value={value?.join?.('\n')}
      rows={4}
      onChange={(v) => onChange(v?.target?.value?.split?.('\n'))}
    />
  );
};

<ProFormTextArea
  label="list"
  name={['data', 'itemList']}
>
  <TextArea />
</ProFormTextArea>

[HAOYI99]

@one-pieces 感谢你的回答，我之后会再试试看