Как правильно использовать схему Yup с одиночной реакцией выбора? - PullRequest
Новая
       23

Как правильно использовать схему Yup с одиночной реакцией выбора?

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

Я использую react-select с Formik и Yup для проверки моей формы, но по какой-то причине моя проверка не работает.Моя схема выглядит так: 

const Schema = Yup.object().shape({
age: Yup.object().shape({
    label: Yup.string().required("Required"),
    value: Yup.string().required("Required")
})
});

А мои данные выглядят так: 

export const ageOptions = [
  { value: 0.1, label: "Not born yet" },
  { value: 0.3, label: "Baby - 0 to 3 months" },
  { value: 0.6, label: "Baby - 3 to 6 months" },
  { value: 0.12, label: "Baby - 6 to 12 months" },
  { value: 0.18, label: "Baby - 12 to 18 months" },
  { value: 0.24, label: "Baby - 18 to 24 months" },
  { value: 2, label: "2 years" },
  { value: 3, label: "3 years" },
  { value: 4, label: "4 years" },
  { value: 5, label: "5 years" },
  { value: 6, label: "6 years" },
  { value: 7, label: "7 years" },
  { value: 8, label: "8 years" },
  { value: 9, label: "9 years" },
  { value: 10, label: "10 years" },
  { value: 11, label: "11 years" },
  { value: 12, label: "12 years" },
  { value: 13, label: "13 years" },
  { value: 14, label: "14 years" }
];

Когда я выбираю опцию в выборе внутри пользовательского интерфейса, возвращается следующая ошибка: 

age must be a `object` type, but the final value was: `null` (cast from the value `0.6`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`

Как правильно настроить проверку?

Ссылка на песочницу

1 Ответ

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

Требуется, чтобы age имел тип object, но установите для него значение выбранного параметра.Это то, что вызывает вашу неправильную проверку.Вот как исправить вашу проверку:

  1. Если вы хотите, чтобы age был объектом, измените вашу схему на следующую: 
const Schema = Yup.object().shape({
    age: Yup.object().shape({
        label: Yup.string().required("Required"),
        value: Yup.string().required("Required")
    })
});

ещеустановите его следующим образом: 

const Schema = Yup.object().shape({
    age: Yup.string()
});
Обновите onChange в компоненте Select, чтобы установить значение option вместо option.value, если вы хотите использовать объект в проверке схемы. 
<Select
    { ... }
    value={field.value} // This can be set like this as a result of the change
    onChange={option => form.setFieldValue(field.name, option)}
/>

Это должно заставить его работать.

...