Formik + Yup доступа к ошибкам для вложенных значений - PullRequest
Новая
       5

Formik + Yup доступа к ошибкам для вложенных значений

0 голосов
/ 08 мая 2019

Я пытаюсь использовать Formik и Yup вместе для проверки данных моих пользователей, но когда я пытаюсь получить доступ к ошибкам вложенного значения, например address.line1, я получаю сообщение о том, что оно не определено. Как мне получить доступ к ошибкам для вложенного значения с помощью Formik и Yup?

См. Codesandbox: https://codesandbox.io/s/ly027lklq7

1 Ответ

1 голос
/ 08 мая 2019

Глядя на ваш код, кажется, что вы неправильно обращаетесь к объекту. Ваши условия были errors.line1 && touched.address.line1, но должны быть errors.address && errors.address.line1 && touched.address.line1.

Ваша ошибка произошла из-за того, что error.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>
...