使用突变反应查询重置formik表单

Question

我有一个使用 formik 和 react 查询的表单。我想在成功时重置表单。

有没有办法将 resetForm 函数作为参数传递给 onSuccess ？

const mutation = useMutation(
  (newUser) =>
    axios.post(`/api/accounts`, newUser),
  {
    onSuccess: (data) => {
      alert(JSON.stringify(data));
      router.push(`/confirm-email?email=${data.email}`);
    },
    onError: (error) => {
      if (error.response && error.response.data.message) {
        openSnackbar(error.response.data.message);
      } else {
        openSnackbar('Something went wrong, please retry later');
      }
    },
  }
);

表格

<Formik
  onSubmit={(values, { setSubmitting, resetForm }) => {
    mutation.mutate(values);
    setSubmitting(false);
  }}
>
  ...
</Formik>

Answer 1

您可以在 useMutation 和 onMutate 中设置 onSuccess：

<Formik
  onSubmit={(values, { setSubmitting, resetForm }) => {
    mutation.mutate(values, { onSuccess: ()=> resetForm() });
    setSubmitting(false);
  }}
>
  ...
</Formik>