从api调用重置表单后清除yup错误消息

// 假设使用React框架进行开发

import { useState } from 'react';
import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string().required('姓名不能为空'),
  email: Yup.string().email('请输入有效的邮箱地址').required('邮箱不能为空'),
});

const MyForm = () => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});

  const handleSubmit = async () => {
    try {
      await schema.validate(values, { abortEarly: false });
      // 表单数据合法，继续后续处理
    } catch (validationErrors) {
      const yupErrors = {};
      validationErrors.inner.forEach((error) => {
        yupErrors[error.path] = error.message;
      });
      setErrors(yupErrors);
    }
  };

  const handleReset = () => {
    setValues({});
    setErrors({});
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={values.name || ''}
        onChange={(e) => setValues({ ...values, name: e.target.value })}
      />
      {errors.name && <span>{errors.name}</span>}
      <input
        type="email"
        name="email"
        value={values.email || ''}
        onChange={(e) => setValues({ ...values, email: e.target.value })}
      />
      {errors.email && <span>{errors.email}</span>}
      <button type="submit" onClick={handleSubmit}>提交</button>
      <button type="button" onClick={handleReset}>重置</button>
    </form>
  );
};

export default MyForm;