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
Hi there, thanks for releasing this amazing product!
I would like to use it in my nextjs project and I'm running into a few issues with toast.promise() and toast.loading().
I am trying to disable a submit button -> show loading toast -> await my action -> show success (or error). Which would be the expected behaviour, however, I only get the loading toast only the second time I click the button. The success toast is more consistent.
There is an extract of my form that is trying to render the toast by using useFormState()
'use client'importButtonfrom"@/components/Button";import{useFormState}from"react-dom";importtoastfrom"react-hot-toast";functiondoStuff(formData: FormData){// if (Math.floor((Math.random() * 4) + 1) === 1) {// throw new Error('This is a planned error')// }returnnewPromise(resolve=>setTimeout(resolve,1500))}asyncfunctionsomeAction(state: any,formData: FormData){consttoastId=toast.loading('Loading')// This toast is not not shown, sometimes on third or second time of hitting the buttontry{awaitdoStuff(formData)}catch(error){toast.dismiss(toastId);toast.error((errorasError).message)return{errors: 'something went wrong'}}toast.success('Success!',{id: toastId})return{message: 'ok'}}constForm=()=>{constinitialState={message: null,error: null};const[state,dispatch]=useFormState(someAction,initialState);return(<formaction={dispatch}><Button/></form>)}exportdefaultForm
The text was updated successfully, but these errors were encountered:
It seems that this project has been abandoned. Here is a minimal reproduction that there is a difference between triggering by click and form action when using react-hot-toast.
I tested that this is a problem only when using react-hot-toast.
Hi there, thanks for releasing this amazing product!
I would like to use it in my nextjs project and I'm running into a few issues with
toast.promise()
andtoast.loading()
.I am trying to disable a submit button -> show loading toast -> await my action -> show success (or error). Which would be the expected behaviour, however, I only get the loading toast only the second time I click the button. The success toast is more consistent.
Please have look at MauricioKruijer/nextjs-react-hot-toast@fb8db5a for more information. You can run this project to experience what I'm talking about.
There is an extract of my form that is trying to render the toast by using
useFormState()
The text was updated successfully, but these errors were encountered: