Ant Design Form.Item 输入校验：异步请求验证并显示错误提示

您可以尝试以下代码实现您的需求：

import { Form, Input } from 'antd';
import { useState } from 'react';

const YourComponent = () => {
  const [form] = Form.useForm();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [validationResults, setValidationResults] = useState({});

  const onFinish = async (values) => {
    setIsSubmitting(true);
    try {
      // 发送请求并等待响应
      const response = await yourApiFunction(values);
      // 根据响应结果进行处理
      if (response.success) {
        form.validateFields();
      } else {
        setValidationResults({
          yourInputName: {
            status: 'error',
            help: '校验失败提示信息',
          },
        });
      }
    } catch (error) {
      console.error(error);
      // 处理请求错误
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
    >
      <Form.Item
        name="yourInputName"
        rules={[
          {
            required: true,
            message: '请输入内容',
          },
        ]}
        validateStatus={validationResults.yourInputName?.status}
        help={validationResults.yourInputName?.help}
      >
        <Input placeholder="请输入内容" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" loading={isSubmitting}>
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default YourComponent;

在上述代码中，我们使用了Form和Form.Item组件来构建表单，并通过useForm钩子函数创建了一个表单实例form。我们使用useState钩子函数来管理提交状态isSubmitting和校验结果validationResults。

当提交表单时，我们首先将提交状态isSubmitting设置为true，然后发送请求并等待响应。根据响应结果，如果成功，我们调用form.validateFields()方法来触发表单校验；如果失败，我们使用setValidationResults函数设置校验结果，将对应输入框的状态设置为error，并提供校验失败的提示信息。

最后，我们在Form.Item组件中使用validateStatus和help属性来动态设置输入框的状态和提示信息。

请注意替换代码中的yourApiFunction为您实际的接口请求函数，并根据实际情况修改代码中的yourInputName、校验失败提示信息等内容。