在 formik 上显示 API 错误，如 yup 消息错误

Question

我编写这段代码是为了使用 formik 和 yup 创建一个登录表单。现在，我正在尝试处理来自登录 API 的错误，但我没有找到任何有用的示例或指南。有一种通用方法可以根据 Formik 组件的 initialValues 字段或 yup 模式中定义的字段来处理所有可能的 API 错误？

这是我的自定义 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.

Answer 1

您可以调用setFieldError inside 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)
}}

在 formik 上显示 API 错误，如 yup 消息错误

Show API error on formik like yup message error

error-handling

reactjs

react-native

yup

formik