Javascript 验证在Antd中以动态形式从删除的行继续工作

Javascript 验证在Antd中以动态形式从删除的行继续工作,javascript,reactjs,antd,Javascript,Reactjs,Antd,我遵循Antd的文档,并尝试从这里使用这段代码: 从“antd”导入{Form,Input,Button,Space}; 从“@ant design/icons”导入{MinusCircleOutlined,PlusOutlined}; 常量演示=()=>{ const onFinish=值=>{ log('接收到的值的形式:',值); }; 返回( {(字段,{add,remove})=>( {fields.map(field=>( 删除(field.name)}/> ))} add()}块图

我遵循Antd的文档,并尝试从这里使用这段代码:

从“antd”导入{Form,Input,Button,Space};
从“@ant design/icons”导入{MinusCircleOutlined,PlusOutlined};
常量演示=()=>{
const onFinish=值=>{
log('接收到的值的形式:',值);
};
返回(
{(字段,{add,remove})=>(
{fields.map(field=>(
删除(field.name)}/>
))}
add()}块图标={}>
添加字段
)}
提交
);
};
但是我有一个错误,当我添加一些行,然后删除其中一些行,最后提交时,即使在我删除了这些行之后,验证程序仍会继续工作

这是一个复制我的错误的演示。
这是一个来自antd的bug

在他们的github上发布了一个关于此的问题。

和合伙人公关:

上周已合并了一个修复程序。通常情况下,下一个版本将包括修复程序

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>
  );
};