Formik 错误对象未在输入时正确更新

Posted 2023-02-18

【中文标题】Formik 错误对象未在输入时正确更新

【英文标题】：Formik errors object is not being updated properly on input

【发布时间】：2022-01-19 17:34:54

【问题描述】：

在这里进入一个新的代码库，这也是我第一次使用 Formik 和 Yup，所以我会尽量简洁，但请耐心等待。

我有一些使用 Formik 构建的表单，并使用 Yup 提供的验证模式。我还有一个 useState 变量来指示 Yup 的 errors 对象中是否存在一个项目，该对象用于防止用户继续下一个表单，直到错误得到修复。验证最初可以正常工作，因为当提供无效输入时，errors 对象中会显示相应的错误。但是，如果我在字段中输入有效的内容，然后返回并更改它以使其无效，则 errors 对象不会更新以反映该新错误，直到下一个输入事件，这会抛出状态的值变量检查它。一个基本的例子：

输入邮箱：testgmail.com ---> errors:email: "Invalid email"

输入邮箱：[e-mail] ---> errors：

输入邮箱：test@gmail ---> errors：

直到我触发下一个输入，errors 才会填充回email: "Invalid email"。

知道如何解决这个问题吗？我将尝试在下面提供一些清理过的代码，但再次道歉，因为它对我来说是一个全新的代码库，所以我不确定它会有多大用处。

const validate = Yup.object().shape(
    name: Yup.string().required("This field is required"),
    email: Yup.string()
      .email("Invalid email format")
      .required("Your email is required"),
    code: Yup.string().required("This field is required"),
  );

function handleInputChange(e: any, errors: FormikErrors, errorSetter: any, codeSetter: any, codeInfo: any) 
    codeSetter( ...codeInfo, [e.target.name]: e.target.value );
    if (Object.keys(errors).length > 0) 
      errorSetter(true);
    
    else errorSetter(false)
  

<Formik
            initialValues=
              name: codeInfo.name,
              email: codeInfo.email,
              code: codeInfo.code,
            
            onSubmit=() => 
            validationSchema=validate
          >
            (
              handleSubmit,
              handleChange,
              values,
              errors,
              touched,
              handleBlur,
            ) => (
              <form className=styles.form onSubmit=handleSubmit>
                <div className=styles.formTextfields>
                  <div className=styles.textfields>
                    <span className=styles.tag>Email*</span>
                    <TextField
                      name="email"
                      value=values.email
                      placeholder="[e-mail]"
                      onChange=handleChange
                      onBlur=handleBlur
                      onInput=(e: any) => handleInputChange(e, errors)
                      variant=
                        errors.email && touched.email ? "error" : "focus"
                      
                    />
                    errors.email && touched.email ? (
                      <div className=styles.error>errors.email</div>
                    ) : null
                  </div>
              </form>
            )
</Formik>

【参考方案1】：

也许我缺少一些东西，但我不明白 handleInputChange 函数是如何工作的......你可以尝试删除那个道具。

Formik 已经在使用 handleChange 和 handleBlur 处理程序处理字段更改和字段模糊，因此它已经在进行验证检查。

这是您可能会使用的一些工作代码（我已删除名称和代码字段，因为它们不会出现在您代码的任何字段中）

const validate = Yup.object().shape(
  email: Yup.string()
    .email("Invalid email format")
    .required("Your email is required"),
);

const Component = () => 
  return (
    <Formik
      initialValues=
        email: "",
      
      onSubmit=() => 
      validationSchema=validate
    >
      (
        handleSubmit,
        handleChange,
        values,
        errors,
        touched,
        handleBlur,
      ) => 
        return (
          <form onSubmit=handleSubmit>
            <div>
              <span>Email*</span>
              <TextField
                name="email"
                value=values.email
                placeholder="[e-mail]"
                onChange=handleChange
                onBlur=handleBlur
              />
              errors.email && touched.email ? <div>errors.email</div> : null
            </div>
          </form>
        );
      
    </Formik>
  );
;