ReactJS | Объекты не действительны как реагируют дети - PullRequest
Новая
       12

ReactJS | Объекты не действительны как реагируют дети

0 голосов
/ 18 марта 2019

Я использую React с Formik для создания формы управления. (Error Handling, submission etc). У меня небольшие проблемы с обработкой ошибок с сервера.

Чтобы решить эту проблему, я использовал встроенный Formik <ErrorMessage />. Итак, в первый элемент формы я добавил его. Как показано ниже: 

<form onSubmit={handleSubmit}>
          <div className="pb-2">
            <label className="font-weight-bold" htmlFor="username">
              Username <Asterisk />
            </label>
            <Field
              validate={this.debounceUsernameValidation}
              className={classNames('form-control', {
                'is-invalid': errors.username && touched.username
              })}
              placeholder="Username (Required)"
              autoComplete="false"
              name="username"
              type="text"
            />
            {errors.username && touched.username ? (
              <div className="text-danger">{errors.username}</div>
            ) : null}
          </div>
          <ErrorMessage name={errors.username} component="div" className="text-danger small" />
</form>

Но я получаю следующую ошибку: 

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Я не уверен, что сделал неправильно. Не могли бы вы помочь мне справиться с этим и дать мне понять, в чем заключается эта ошибка? Я имею в виду ошибки, которые исходят либо со стороны сервера, либо со стороны клиента, должны быть объектом.

И когда Реакт говорит If you need to be an object, use an array instead. Я действительно не понимаю. Спасибо за ваше время.

Ошибка объекта. Это генерируется Yup, который работает в сочетании с Formik: 

{ "username": "Username is Required", "password": "Password is required", "confirmPassword": "Password Confirmation is Required", "group": "Group is required" }

1 Ответ

2 голосов
/ 18 марта 2019

Вы используете <ErrorMessage ... /> неправильно.Имя prop должно быть строкой с тем же значением, что и ключ, который имеет ваш объект ошибки.Примерно так: 

<ErrorMessage component="div" name="username" />
// --> {touched.username && error.username ? <div>{error. username}</div> : null}

Если мы следуем документации:

name

name: string Обязательно

Имя поля в состоянии Formik.Чтобы получить доступ к вложенным объектам или массивам, name> также может принимать траекторию, подобную lodash, например social.facebook или> friends[0].firstName

Взгляните на пример в DOC:

https://jaredpalmer.com/formik/docs/api/errormessage

...