react-hook-form: setError problems (or misusage)

First of all thanks for the great library!

We were using redux-forms intensively in our current project and now want to switch to hooks based solution. Yours works perfectly for most of the cases but there are still some things that require rethinking.

There was a special type of error thrown in submit handlers called SubmissionError. The object passed to it allowed setting an error of some type in case submit action failed. I tried to repeat that behavior but got a problem with setError. If I set error state for any existing field (or non-existing submission filed) I see that errors object in the form is changed accordingly but then rerender occurs (probably after validation?) and it returns to the previous empty state.

I use something like this:

export const withSubmissionErrorHandler = (
  onSubmit: Function,
  setError: SetError,
) => {
  return async (...args) => {
    try {
      await onSubmit(...args)
    } catch (err) {
      if (err instanceof SubmissionError) {
        setError('submission', 'submission', err.submissionMessage)
      }
    }
  }
}

that is used in form

<form
      onSubmit={handleSubmit(withSubmissionErrorHandler(onSubmit, setError))}
    >

and throw custom error in onSubmit method passed to the form.

Is there any better solution for that? Or how can I fix setError behavior? Or could it be I use it in a wrong way?

Thanks in advance.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 20 (20 by maintainers)

Commits related to this issue

Most upvoted comments

Yea, I understand where you coming from: which are the goodies from redux-form. but to be honest, I don’t plan to implement throw errors at this stage. I am not seeing the value of throw error for submitting at validation that much (at this stage) and personally, I prefer to keep the API simple and primitive, however, I am open to changes if more people request similar feature.

Oh, sure. Thanks!

Works now!

Wow! Thank you!