Как назначить валидацию объекта в yup для реагирования на выбор (одиночный выбор) - PullRequest
Новая
       43

Как назначить валидацию объекта в yup для реагирования на выбор (одиночный выбор)

0 голосов
/ 28 февраля 2019

Я пытаюсь реализовать проверку для реакции-выбора (одиночного выбора), используя концепцию yup.Но я получаю эту ошибку:

Объекты недопустимы как дочерний элемент React (найдено: объект с ключами {label, value}).Если вы хотите визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Я хочу знать, как назначать объекты в схеме проверки для концепции yup 

<Formik
  initialValues={{
    department:"",
  }}
  onSubmit={this.submitForm}
  validationSchema={Yup.object().shape({
    department: Yup.object().shape({
      label: Yup.string().required(),
      value: Yup.string().required(),
    }),
})}>
{ props => {
  const {
    values,
    touched,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    selectedOption
  } = props;
  return (
    <React.Fragment>

    <InputLabel shrink htmlFor={'department'}>
    Department</InputLabel>
    <Select
          inputId="department"
          options={options}
          value={values.department}
          onChange={this.onChangeOption}
          onBlur={handleBlur}         
       />
{errors.department && touched.department && ( {errors.department} )} 
Submit </div> </React.Fragment> ); }}

1 Ответ

0 голосов
/ 28 февраля 2019

Я хочу знать, как назначить объекты в схеме проверки для концепции yup

Вы сделали это правильно (насколько я могу судить): 

validationSchema={Yup.object().shape({
  department: Yup.object().shape({
    label: Yup.string().required(),
    value: Yup.string().required(),
  })
}

На что React жалуется, это строка: 

{errors.department && touched.department && ( {errors.department} )}

Что это означает, если errors имеет ключ с именем department и если touched имеет ключ с именем department, то визуализировать объектerrors.department.Реакт не может этого сделать.Если вы хотите отобразить ошибки, которые вы предлагаете, я предлагаю иметь выделенный компонент (например, тег <p>) для него вне вашего выбора.Примерно так: 

{errors.department && touched.department && (<p>{errors.department.label}</p>)}

Вы можете сделать что-то подобное для value.

PS: Ваш код кажется неполным и плохо отформатирован (например, есть плавающий тег <div />).

...