🐛[BUG] ProFormList嵌套ProFormList无法正确删除

[zd5043039119]

提问前先看看：

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

🐛 bug 描述

当ProFormList嵌套ProFormList,且有initialValues,且ProForm配置了preserve为false时,删除到最后一个元素后会生成一个空对象

📷 复现步骤

1. 访问复现代码链接, 点击删除
2. 点击第二行的删除后无法正确删除

🏞 期望结果

能正常删除所有数据

💻 复现代码

https://codesandbox.io/s/proform-list-proformlist-forked-bok1c2?file=/App.tsx

© 版本信息

• ProComponents 版本: 2.4.2
• 浏览器环境 chrome

🚑 其他信息

1. 非嵌套结构一切正常
2. initialValue中 没有嵌套的空数组也正常
3. 使用Antd Form还原相同场景无法重现 (附Antd Form的代码 https://codesandbox.io/s/fu-za-de-dong-tai-zeng-jian-biao-dan-xiang-antd-5-3-2-forked-vc7et4?file=/demo.tsx)

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🧐[问题]ProFormList里的ProFormTable #5618][🧐[问题]ProFormList里的ProFormTable][63%]

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

尝试了在提交按钮的 onSubmit 方法中处理掉添加后的空对象，但是在删除时还是会存在类似的问题。可以考虑在删除时通过 ProFormList 的 API 获取子表单的值进行判断，如果是空对象则跳过删除。代码示例如下：

import { useState, useCallback } from "react";
import {
  Form,
  Input,
  Space,
  Button,
  Divider,
  message,
  Card,
  Checkbox,
} from "antd";
import ProForm, {
  ProFormList,
  ProFormText,
  ProFormCheckbox,
} from "@ant-design/pro-form";

interface IPerson {
  name: string;
  age: number;
  country: string;
  hobby: string[];
}
const listLayout = {
  labelCol: {
    span: 24,
  },
  wrapperCol: {
    span: 24,
  },
};

const App = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState<IPerson[]>([
    {
      name: "张三",
      age: 18,
      country: "中国",
      hobby: ["羽毛球", "散步"],
    },
    {
      name: "李四",
      age: 20,
      country: "美国",
      hobby: ["篮球", "骑行"],
    },
    {
      name: "王五",
      age: 22,
      country: "日本",
      hobby: ["游泳", "跑步"],
    },
    { name: "", age: 0, country: "", hobby: [] },
  ]);

  const onAddClick = useCallback(() => {
    setData([...data, { name: "", age: 0, country: "", hobby: [] }]);
  }, [data]);

  const onRemoveClick = useCallback(
    (index) => {
      const values = form.getFieldsValue();
      const { list: dataValues } = values;
      if (dataValues[index] && Object.keys(dataValues[index]).length === 4) {
        dataValues.splice(index, 1);
        setData(dataValues);
      } else {
        message.error("无法删除");
      }
    },
    [form]
  );

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

  return (
    <Card>
      <ProForm form={form} onFinish={onFinish}>
        <ProFormText name="title" label="标题" />
        <ProFormCheckbox name="hot" label="热门" />
        <ProFormList
          name="list"
          label="人员列表"
          initialValue={data}
          transform={(data: IPerson[]) => data.map((item, index) => ({ ...item, key: index }))}
        >
          {(fields, { add, remove }) => (
            <>
              {fields.map((field, index) => (
                <Card
                  key={field.key}
                  extra={
                    fields.length > 1 ? (
                      <Button danger onClick={() => onRemoveClick(index)}>
                        删除
                      </Button>
                    ) : null
                  }
                  style={{ marginBottom: 16 }}
                >
                  <Space key={field.key} style={{ display: "flex" }} align="baseline">
                    <Form.Item
                      {...listLayout}
                      label="姓名"
                      name={[field.name, "name"]}
                      fieldKey={[field.fieldKey, "name"]}
                      rules={[
                        { required: true, message: "必填" },
                        { max: 20, message: "最多20个字" },
                      ]}
                      initialValue={data[index].name}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      {...listLayout}
                      label="年龄"
                      name={[field.name, "age"]}
                      fieldKey={[field.fieldKey, "age"]}
                      rules={[{ required: true, message: "必填" }]}
                      initialValue={data[index].age}
                    >
                      <Input type="number" />
                    </Form.Item>
                    <Form.Item
                      {...listLayout}
                      label="国籍"
                      name={[field.name, "country"]}
                      fieldKey={[field.fieldKey, "country"]}
                      rules={[
                        { required: true, message: "必填" },
                        { max: 20, message: "最多20个字" },
                      ]}
                      initialValue={data[index].country}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      {...listLayout}
                      label="爱好"
                      name={[field.name, "hobby"]}
                      fieldKey={[field.fieldKey, "hobby"]}
                      rules={[{ required: true, message: "必填" }]}
                      initialValue={data[index].hobby}
                    >
                      <Checkbox.Group>
                        <Checkbox value="篮球">篮球</Checkbox>
                        <Checkbox value="足球">足球</Checkbox>
                        <Checkbox value="游泳">游泳</Checkbox>
                        <Checkbox value="跑步">跑步</Checkbox>
                        <Checkbox value="羽毛球">羽毛球</Checkbox>
                      </Checkbox.Group>
                    </Form.Item>
                  </Space>
                </Card>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={() => add()}>
                  添加
                </Button>
              </Form.Item>
            </>
          )}
        </ProFormList>
        <Divider />
        <Button type="primary" htmlType="submit">
          提交
        </Button>
        <Button onClick={onAddClick}>添加空字段</Button>
      </ProForm>
    </Card>
  );
};

export default App;

参考文档：https://ant.design/components/form-cn/ 和 https://ant.design/components/list-cn/