在 React Native 中提交 Formik 表单后，如何显示发现错误的警报

Question

我有一个原生Formik表单react和一个YupvalidationSchema。当用户提交表单时，如果存在无效字段，我想创建一个带有错误字段的警报。

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

我尝试isValid在Formik渲染内部使用并创建一个带有错误的警报，但我得到一个空的错误对象。但是，如果我再次提交/或单击提交两次，则错误对象会按预期包含无效字段。

如何在第一次提交时获取错误对象？

Answer 1

你应该做的是有一个模态或类似的东西来显示错误。

当使用Formik您渲染的组件时（您可以使用component，render以及children）将收到带有错误的道具，如您在文档示例中看到的那样。

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors将是一个对象，因此您检查keys（或者您也可以使用values）errors并决定是否呈现错误模式。

<Formik
    validationSchema={yourValidationSchema}
    onSubmit={whatYouWantTodoWhenEverythingIsGood}
    initialValues={{ email: '' }}
>                                 
    {({ errors, values, handleChange, handleBlur}) => (
        <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
            {// checking if you have errors}
            {
                Object.keys(errors).length > 0 && 
                    <Modal errors={errors}/>
            }
        </View>
  )}
</Formik>

根据您的模式来自哪里，您可以使用<Modal isActive={Object.keys(errors).length > 0} errors={errors}/>或其他类似的东西。

例如使用react-native模式

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

您应该使用Object.keys(errors).length > 0来决定是否应该显示模式errors。