提交表单后删除 Formik 错误消息

Question

进入我的屏幕后，输入字段上没有显示错误。

在我的表单中，我接受一个输入并在其上运行一个 graphql 突变。完成后，我重置表格。但是，重置后，我开始看到 Formik 错误，因为该字段是 .required() 并且目前它是空的。

仅当我尝试在没有输入的情况下提交表单时才会显示此错误。提交成功后就不应该显示了。

  const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
    editLocationName({
      variables: {
      favouritePlaceId: route.params.id,
      input: {customisedName: values.locationName}
      },
    });
    helpers.resetForm();
    helpers.setErrors({});
  };
.....


          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmitForm}
            validationSchema={validationSchema}>
            {({ handleChange, handleBlur, handleSubmit, values }) => (
              <View style={styles.searchFieldContainer}>
                <View style={styles.form}>
                  <FieldInput
                    handleChange={handleChange}
                    handleBlur={handleBlur}
                    value={values.locationName}
                    fieldType="locationName"
                    placeholderText="Neuer Name"
                  />
                  <ErrorMessage
                    name="locationName"
                    render={(msg) => <ErrorText errorMessage={msg} />}
                  />
                </View>
                <View style={styles.buttonContainer}>
                  <ActionButton buttonText="Save" onPress={handleSubmit} />
                </View>
              </View>
            )}
          </Formik>

验证架构：

const favouriteLocationNameValidationSchema = yup.object().shape({
  locationName: yup
  .string()
  .label('locationName')
  .required('Required Field')
});

如何重置错误信息以及表单？

setErrors({}) 对我不起作用。

Answer 1

在这里添加它，因为建议需要代码。添加以下代码，如果有帮助请告诉我。

helpers.resetForm({
 errors: {},
 touched: {}
});

Remove helpers.setErrors({});