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

Xaa*_*rth 1 reactjs formik react-query

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

有没有办法将 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');
      }
    },
  }
);
Run Code Online (Sandbox Code Playgroud)

形式

<Formik
  onSubmit={(values, { setSubmitting, resetForm }) => {
    mutation.mutate(values);
    setSubmitting(false);
  }}
>
  ...
</Formik>
Run Code Online (Sandbox Code Playgroud)

TkD*_*odo 6

你可以在 useMutation 和 onMutate 中使用 onSuccess :

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

  • 请参阅:https://react-query.tanstack.com/guides/mutations#mutation-side-effects (2认同)