验证在 Antd 中以动态形式继续对已删除的行进行验证

Question

我正在关注 Antd 的文档，并尝试使用此处antd 动态表单项中的这段代码：

import { Form, Input, Button, Space } from 'antd';

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const Demo = () => {

  const onFinish = values => {

    console.log('Received values of form:', values);

  };

  return (

    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">

      <Form.List name="users">

        {(fields, { add, remove }) => (

          <>

            {fields.map(field => (

              <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">

                <Form.Item

                  {...field}

                  name={[field.name, 'first']}

                  fieldKey={[field.fieldKey, 'first']}

                  rules={[{ required: true, message: 'Missing first name' }]}

                >

                  <Input placeholder="First Name" />

                </Form.Item>

                <Form.Item

                  {...field}

                  name={[field.name, 'last']}

                  fieldKey={[field.fieldKey, 'last']}

                  rules={[{ required: true, message: 'Missing last name' }]}

                >

                  <Input placeholder="Last Name" />

                </Form.Item>

                <MinusCircleOutlined onClick={() => remove(field.name)} />

              </Space>

            ))}

            <Form.Item>

              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>

                Add field

              </Button>

            </Form.Item>

          </>

        )}

      </Form.List>

      <Form.Item>

        <Button type="primary" htmlType="submit">

          Submit

        </Button>

      </Form.Item>

    </Form>

  );

};

但是我遇到了这个错误，当我添加一些行，然后删除其中一些行并最终提交时，即使我删除了这些行，验证器仍然继续工作。

https://i.stack.imgur.com/nNO8s.gif

这是一个复制我的错误的演示。 https://codesandbox.io/s/quizzical-ride-m1pe6?file=/src/App.js