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 一开始并不存在，因为错误在开始时是一个空对象。您可以通过 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 访问嵌套值的错误

Formik + Yup accessing errors for nested values

node.js

reactjs

yup

formik