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

Question

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

我有一些使用 Formik 构建的表单，并使用 Yup 提供的验证模式。我还有一个 useState 变量来指示 Yup 的

errors

对象中是否存在某个项目，该对象用于阻止用户继续下一个表单，直到错误得到修复。验证最初工作正常，因为当提供无效输入时，相应的错误会显示在

errors

对象中。但是，如果我在字段中输入有效的内容，然后返回并更改它以使其无效，则

errors

对象不会更新以反映该新错误，直到下一个输入事件，这会抛出状态值变量检查它。一个基本的例子：

输入邮箱：testgmail.com --->

errors

:

{email: "Invalid email"}

输入电子邮件：[电子邮件受保护] --->

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="[email protected]"
                      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>

Answer 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="[email protected]"
                onChange={handleChange}
                onBlur={handleBlur}
              />
              {errors.email && touched.email ? <div>{errors.email}</div> : null}
            </div>
          </form>
        );
      }}
    </Formik>
  );
};