formik 表单在动作调度时重置

Question

是否有任何可能的方法在我发送操作后立即重置表单？

类似于：

const formik = useFormik({
  onSubmit: (values, {resetForm}) => {
    dispatch(action.register(values)) //some action creator with axios.post request

    if (isRegistred) { resetForm() }  //isRegistred - value from Selector which changes on dispatch to true

  }
})

const register = (user) => (dispatch) => {
  return axios
    .post(`${API_URL}/user/create/`, {
      first_name: user.firstName,
      second_name: user.secondName,
      date_birth: user.dateBirth,
      phone_number: user.phoneNumber,
      gender: user.gender,
      email: user.email,
      city: user.city,
      username: user.username,
      password1: user.password1,
      password2: user.password2
    })
    .then((response) => {
      dispatch({ type: '@USER/register-success', isRegistred: response.data?.success })
    })
    .catch((error) => {
      dispatch({ type: '@USER/register-error', error: error?.response?.data?.errors })
    })
}

export const action = { register }

我知道，这有点傻，因为它会立即更改值。也许还有其他方法？

Answer 1

如果有人感兴趣，我只是将 resetForm 从 onSubmit formik 传递给 action creator。

  const formik = useFormik({
    initialValues,
    validationSchema,
    onSubmit: (values, { resetForm }) => {
      dispatch(userActions.register(values, { resetForm }))
    },
    validateOnChange: false,
    validateOnBlur: true
  })

const register = (user, { resetForm }) => (dispatch) => {
  return axios
    .post(`${API_URL}/user/create/`, {
      first_name: user.firstName,
      second_name: user.secondName,
      date_birth: user.dateBirth,
      phone_number: user.phoneNumber,
      gender: user.gender,
      email: user.email,
      city: user.city,
      username: user.username,
      password1: user.password1,
      password2: user.password2
    })
    .then((response) => {
      dispatch({ type: '@USER/register-request' })

      if (response.data?.success) {
        dispatch({ type: '@USER/register-success', isRegistred: response.data?.success })
        resetForm()
      }
    })
    .catch((error) => {
      dispatch({ type: '@USER/register-error', error: error?.response?.data?.errors })
    })
}

formik 表单在动作调度时重置

formik form reset on action dispatch

reactjs

react-redux

formik