React + Formik + Yup异步验证

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email').required('Required'),
});

const asyncValidate = (values) => {
  return new Promise((resolve, reject) => {
    // 进行异步验证逻辑，例如检查用户名是否已存在
    // 如果验证成功，调用resolve()
    // 如果验证失败，调用reject()，并提供错误消息
  });
};

const App = () => {
  const handleSubmit = (values) => {
    // 处理表单提交逻辑
  };

  return (
    <Formik
      initialValues={{ email: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
      validate={asyncValidate}
    >
      <Form>
        <div>
          <label>Email:</label>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default App;