Блог

В моей простой форме это моя схема проверки:

 const validationSchema = Yup.object().shape({  firstName: Yup.string().required().min(2).label('First Name'),  lastName: Yup.string().required().min(2).label('Last Name'),  email: Yup.string("Please enter valid email address").email("Please enter valid email address").label("Email address"),  profession: Yup.string("Please enter your profession") });  

И я задаю начальное значение как пустую строку, если существующий пользователь равен нулю. Подобный этому:

 initialValues={{  firstName: currentUser ? currentUser.firstName : "",  lastName: currentUser ? currentUser.lastName : "",  email: currentUser ? currentUser.email : "",  profession: currentUser ? currentUser.profession : ""  }}  

И это мой компонент поля формы, который обрабатывает каждый ввод.

 function AppFormField({ name, width, ...otherProps }) {  const { setFieldTouched, setFieldValue, values, errors, touched } = useFormikContext();  return (  lt;gt;  lt;AppTextInput  onBlur={() =gt; setFieldTouched(name)}  onChangeText={text =gt; setFieldValue(name, text)}  width={width}  value={values[name]}  {...otherProps}  /gt;  lt;ErrorMessage error={errors[name]} visible={touched[name]} /gt;  lt;/gt;  ); }  

Все работает нормально, если я касаюсь пустых полей и что-то помещаю (даже после того, как сделаю это пустым позже), но если я ничего не трогаю и не набираю в поле электронной почты или профессии и пытаюсь отправить форму, это выдает следующую ошибку:

Профессия должна быть строкового типа, но конечным значением было «null».

Я не понимаю, почему пустая строка была изменена на null и как работать с этим полем как с необязательным, даже если оно равно false. Вот пример скриншота

Наконец — то я понял, в чем дело. Значение Null исходило из вложенного свойства. Почему-то он не был готов при инициализации значения. Итак, решение заключается в следующем:

 initialValues={{  firstName: currentUser?.firstName ? currentUser.firstName : "",  lastName: currentUser?.lastName ? currentUser.lastName : "",  email: currentUser?.email ? currentUser.email : "",  profession: currentUser?.profession ? currentUser.profession : ""  }}  

Просто также проверьте, является ли значение вложенного свойства нулевым или нет. Это оно.