如何使用Formik正确重复使用组件？

Question

我正在重复使用一个表格来注册一个新的地址并更新当前地址，当我将值发送到Formik的输入时，需要很长时间（Likt 5-6秒），我认为这是后端延迟，但是在第一秒钟检查状态，我单击<<<代码>编辑按钮要填写表格后端返回200M，因此我认为有一种更好的方法来管理此数据，

useEffect(() => {
    (async () => {
      if (route.params?.idAddress) {
        setNewAddress(false);
        navigation.setOptions({ title: "Actualizar Dirección" });
        const response = await getExactAddressesApi(
          auth,
          route.params.idAddress
        );
        const data = response.data;
        formik.setFieldValue("id", data.id);
        formik.setFieldValue("title", data.attributes.title);
        formik.setFieldValue("name_lastname", data.attributes.name_lastname);
        formik.setFieldValue("address", data.attributes.address);
        formik.setFieldValue("city", data.attributes.city);
        formik.setFieldValue("district", data.attributes.district);
        formik.setFieldValue("phone", data.attributes.phone);
        formik.setFieldValue("reference", data.attributes.reference);
      }
    })();
  }, [route.params]);

  const formik = useFormik({
    initialValues: initialValues(),
    validationSchema: Yup.object(validationSchema()),
    onSubmit: async (formData) => {
      setLoading(true);
      try {
        if (newAddress) {
          const response = await addAddressApi(auth, formData);
          if (response.error) throw "Error al agregar Dirección";
        } else {
          await updateAddressApi(auth, formData);
        }
        navigation.goBack();
      } catch (error) {
        Toast.show(error, {
          position: Toast.positions.CENTER,
        });
      }
      setLoading(false);
    },
  });
return(
<TextInput
          label="Título"
          style={FormStyle.input}
          theme={FormStyle.themeInput}
          placeholder="Ej: Mi Trabajo"
          onChangeText={(text) => formik.setFieldValue("title", text)}
          value={formik.values.title}
          error={formik.errors.title}
        />
        <TextInput
          label="¿Quién Recibe?"
          style={FormStyle.input}
          theme={FormStyle.themeInput}
          placeholder="Nombre de quien recibe"
          onChangeText={(text) => formik.setFieldValue("name_lastname", text)}
          value={formik.values.name_lastname}
          error={formik.errors.name_lastname}
        />
)

中使用它

function initialValues() {
  return {
    title: "",
    name_lastname: "",
    address: "",
    city: "",
    district: "",
    phone: "",
    reference: "",
  };
}

我还创建了一个函数，该函数返回空值以在Formik vermik validatorsChema

function validationSchema() {
  return {
    title: Yup.string().required(true),
    name_lastname: Yup.string().min(3, true).required(true),
    address: Yup.string().min(5, true).required(true),
    city: Yup.string().required(true),
    district: Yup.string().required(true),
    phone: Yup.string().min(7, true).required(true),
    reference: Yup.string().required(true),
  };
}

getExactActAddresseSapi

export async function getExactAddressesApi(auth, idAddress) {
  try {
    const url = `${API_URL}/addresses/${idAddress}`;
    const params = {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${auth.token}`,
      },
    };
    const response = await fetch(url, params);
    const result = await response.json();
    return result;
  } catch (error) {
    console.log(error);
    return null;
  }
}