You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
handleSubmit function will not swallow errors that occurred inside your onSubmit callback, so we recommend you to try and catch inside async request and handle those errors gracefully for your customers.
const onSubmit = async () => {
// async request which may result error
try {
// await fetch()
} catch (e) {
// handle your error
}
}
return <form onSubmit={handleSubmit(onSubmit)} />
when errors are caught this way then you cannot make use of formState.isSubmitSuccessful because it will always be true when the onSubmit function does not throw an error
Describe the solution you'd like
I have found that letting the error bubble through the handleSubmit function and catching them on the otherside like onSubmit: {e => handleSubmit(onSubmit).catch((e) => {})} allows the isSubmitSuccessful property to be set correctly. I think the docs should be updated.
The text was updated successfully, but these errors were encountered:
Hey @EthanMelamed, if you check video on the same page, you can see that both error handling strategies are addressed. try/catch inside onSubmit and the approach you provided in solution. I wouldn't call it bad recommendation, rather code example is not complete. In the video error handling looks like below
constonSubmit=async(data)=>{try{thrownewError("...");}catch(e){setError("service",{type: "serverSideError",message: "something is wrong",});}};
I'm not sure if this is the right spot to put this issue about documentation. If not please direct me to where I can should provide this feedback.
Is your feature request related to a problem? Please describe.
The docs on this page: https://react-hook-form.com/docs/useform/handlesubmit have a bad recommendation:
when errors are caught this way then you cannot make use of formState.isSubmitSuccessful because it will always be true when the onSubmit function does not throw an error
Describe the solution you'd like
I have found that letting the error bubble through the handleSubmit function and catching them on the otherside like
onSubmit: {e => handleSubmit(onSubmit).catch((e) => {})}
allows theisSubmitSuccessful
property to be set correctly. I think the docs should be updated.The text was updated successfully, but these errors were encountered: