Question

我试图一起使用Formik和Yup来验证用户数据，但是当我尝试访问嵌套值的错误（例如address.line1）时，出现一条错误消息，指出它是未定义的。如何使用Formik和Yup访问嵌套值的错误？

请参阅代码沙箱：https://codesandbox.io/s/ly027lklq7

Answer 1

查看您的代码，似乎您访问的对象错误。您的条件为errors.line1 && touched.address.line1，但应为errors.address && errors.address.line1 && touched.address.line1。

发生错误的原因是，起初不存在errors.address，因为error开头是空对象。您可以通过console.log(errors)进行检查。

我尝试使用这段代码，它可以工作。（https://codesandbox.io/s/4w83767610?fontsize=14）

<Form>
  <Field name="firstName" placeholder="first Name" />
    {errors.firstName && touched.firstName ? (
      <div>{errors.firstName}</div>
    ) : null}
    <br />

  <Field name="address.line1" placeholder="line 1" />
    // changed the conditional and object access
    {errors.address && errors.address.line1 && touched.address.line1 ? (
      <span className="red">{errors.address.line1}</span>
    ) : (
      ""
    )}
    <br />
    <button type="submit">Submit</button>
</Form>

Formik + Yup访问嵌套值的错误

1 个答案: