Показать ошибку API на formik, например, ошибка сообщения yup - PullRequest
Новая
       80

Показать ошибку API на formik, например, ошибка сообщения yup

1 голос
/ 05 мая 2020

Я написал этот код для создания формы входа с использованием formik и yup. Теперь я пытаюсь обработать ошибку при входе в систему API, но не нашел полезного примера или руководства. Существует универсальный метод обработки всех возможных ошибок API на основе полей, определенных в полях initialValues ​​компонентов Formik или схемы yup?

Это мой собственный InputText, который просто обрабатывает yup ошибка: 

export default function InputText({fieldName, noTop, ...props}) {

  const [field, meta] = useField(fieldName);

  return (
    <React.Fragment>
      <TextInput
        style={[styles.input, {marginTop: noTop ? 0 : 20}]}
        value={field.value}
        onChangeText={field.onChange(fieldName)}
        onBlur={field.onBlur(fieldName)}
        {...props}
      />
      {meta.error && meta.touched && (
        <Text style={styles.error}>{meta.error}</Text>
      )}
    </React.Fragment>
  );
}

И это код формы Login: 

<Formik
  validationSchema={loginValidator}
  initialValues={{
    username: '',
    password: '',
  }}
  onSubmit={ async (values) => login(JSON.stringify(values)) }
>
  <LoginBody/>
</Formik>

LoginBody - это тело формы входа, которое создается с использованием useFormikContext(). Он содержит два InputText: username, password; и button это, onPress вызов submitForm.

1 Ответ

1 голос
/ 07 мая 2020

Вы можете вызвать setFieldError внутри onSubmit функцию.

Как вы можете видеть в docs второй параметр onSubmit - это Formikbag, и вы можете получить из него setFieldError. 

onSubmit={async (values, { setFieldError }) => {
    // do what you need to do
    // get the field and the error from the api call
    // set the error message for that field
    setFieldError(fieldName, errorMessage)
}}
...