AntD Form 中如何通过 getFieldError 获取错误信息？

我正在使用 Ant Design 验证表单，但遇到问题getFieldError()。我需要通过 Form.Item 的字段名称获取错误消息，但它不起作用。

这是我的代码在下面不起作用：

...
<Form form={form} name="login_form" onFinish={onFinish} scrollToFirstError>

  <Form.Item
    label="Password"
    name="password"
    rules={[
      {
        required: true,
        message: 'Password cannot be empty!',
      },
    ]}
    help='' // hide validating message.
  >
    <>
     {({ getFieldError }) => console.log(getFieldError('password'))}
     //it not logging anything when submit form trigger error

     <Input.Password placeholder="Enter your password" />
    </>
  </Form.Item>

 </Form>

我该如何解决这个问题？

Your console.log每次渲染组件时都会调用，因此只要在表单上应用验证，您就需要重新渲染组件。为了处理这种情况，你可以使用 render propForm组件，像这样：

function CustomFormItem({ error, ...other }) {
  console.log(error)
  return <Input.Password placeholder="Enter your password" {...other} />;
}

function MyForm() {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };

  return (
      <Form
        form={form}
        name="login_form"
        onFinish={onFinish}
        scrollToFirstError
      >
        {(values,formInstance) => {
          return (
            <>
              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Password cannot be empty!',
                  },
                ]}
                help="" // hide validating message.
              >
                <CustomFormItem error={formInstance.getFieldError('password')} />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </>
          );
        }}
      </Form>
  );
}

考虑到上面的实现，渲染属性将在表单上的每次更改时调用。