如何在formik中处理API验证调用

import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  // 定义表单字段及其验证规则
  username: Yup.string().required('用户名不能为空'),
  password: Yup.string().required('密码不能为空'),
});

const formik = useFormik({
  initialValues: {
    username: '',
    password: '',
  },
  validationSchema: validationSchema,
  onSubmit: (values) => {
    // 处理表单提交逻辑
    // 可以在这里进行API验证调用
    // 例如使用fetch或axios发送POST请求到API验证接口
    // 并根据验证结果做出相应处理
  },
});

<form onSubmit={formik.handleSubmit}>
  <input
    type="text"
    name="username"
    value={formik.values.username}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
  />
  {formik.touched.username && formik.errors.username && (
    <div>{formik.errors.username}</div>
  )}

  <input
    type="password"
    name="password"
    value={formik.values.password}
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
  />
  {formik.touched.password && formik.errors.password && (
    <div>{formik.errors.password}</div>
  )}

  <button type="submit">提交</button>
</form>