在导航上的 react-native 中重置 formik 表单

Question

我正在尝试创建一个可以创建和编辑实体的 React Native 应用程序。

例如，用户。

我有一个包含名字和姓氏的 formik 表格，以及一个电子邮件地址。 如果传递了用户参数，则表单应采用这些值。

但是，它只能在第一次工作。之后，表单将保留第一个值。

如何强制重新评估表单？

function FormScreen({ navigation, route }) {
  const formikRef = React.createRef();
  const initialValues = { firstName: "", lastName: "", email: "" };

  if (route.params && route.params.user) {
    if (route.params.user.firstName) {
      initialValues.firstName = route.params.user.firstName;
    }
    if (route.params.user.lastName) {
      initialValues.lastName = route.params.user.lastName;
    }
    if (route.params.user.email) {
      initialValues.email = route.params.user.email;
    }
  }

  const unsubscribeBlur = navigation.addListener("blur", (e) => {
    console.log("form blur");
    if (formikRef.current) {
      console.log("form reset");
      formikRef.current?.resetForm();
    }
  });

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Formik
        innerRef={formikRef}
        initialValues={initialValues}
        validationSchema={Yup.object({
          firstName: Yup.string()
            .max(15, "Must be 15 characters or less")
            .required("Required"),
          lastName: Yup.string()
            .max(20, "Must be 20 characters or less")
            .required("Required"),
          email: Yup.string()
            .email("Invalid email address")
            .required("Required"),
        })}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" type="text" />
          <ErrorMessage name="firstName" />

          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" type="text" />
          <ErrorMessage name="lastName" />

          <label htmlFor="email">Email Address</label>
          <Field name="email" type="email" />
          <ErrorMessage name="email" />

          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </View>
  );
}

export default FormScreen;

我有代码可以在模糊时重置表单，但重置似乎没有任何作用。

您可以在小吃中找到完整的代码。 https://snack.expo.io/@hackzilla/create-and-edit-with-formik

Answer 1

我们可以在提交后重置表单，这样它就会清除所有字段。请尝试用下面提到的代码替换您的提交方法。

 onSubmit={(values, { setSubmitting, resetForm }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
            // reset the fields after submit
            resetForm();
          }, 400);
        }}

Answer 2

因为您使用的是选项卡导航器。当您在它们之间切换时，主屏幕和表单屏幕不会重新安装。因此 formik 不会加载新的 initialValues。以您的方式，您可以在每次聚焦表单屏幕时使用路由参数重置表单。但更好的方法是使用堆栈导航器，每次使用新实例创建表单。

   useFocusEffect(
    React.useCallback(() => {
      if (formikRef.current) {
        console.log("form reset");
        formikRef.current?.setValues(initialValues);
      }
    })
  );