node.js - Formik + Yup 访问嵌套值的错误

Question

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

见 Codesandbox：https ://codesandbox.io/s/ly027lklq7

Answer 1

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

您的错误发生是因为 errors.address 最初不存在，因为 errors 在开始时是一个空对象。您可以通过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>