Refreshing a page doesn't seem to update uncontrolled inputs?
Answered
Cape lion posted this in #help-forum
Cape lionOP
I am using the new app router on the latest Nextjs release. I have a form built up with react-hook-form, so using uncontrolled components. I have a section in the form that allows me to add new contacts. Every contact in the form has the same set of inputs, but for existing contacts, I add a hidden input with the contact id.
When the form saves successfully, I use the router from next/navigation to
When the form saves successfully, I use the router from next/navigation to
router.refresh(), the idea being that the page would refresh and rerender and if a user clicks "save" again, the previously added contact will now be rendered with a filled out hidden input. However, this does not seem to be the case. If I hit save again after refreshing, my server action receives the same data with the ID missing. How could I go about solving this?Answered by fuma
Be careful that
You can try resetting the react-hook-form state with [
(same for other states)
router.refresh only re-fetch the RSC payload and re-render your page, which means your state won't be reset.You can try resetting the react-hook-form state with [
form.reset](https://react-hook-form.com/docs/useform/reset)(same for other states)
11 Replies
@Cape lion I am using the new app router on the latest Nextjs release. I have a form built up with react-hook-form, so using uncontrolled components. I have a section in the form that allows me to add new contacts. Every contact in the form has the same set of inputs, but for existing contacts, I add a hidden input with the contact id.
When the form saves successfully, I use the router from next/navigation to `router.refresh()`, the idea being that the page would refresh and rerender and if a user clicks "save" again, the previously added contact will now be rendered with a filled out hidden input. However, this does not seem to be the case. If I hit save again after refreshing, my server action receives the same data with the ID missing. How could I go about solving this?
Be careful that
You can try resetting the react-hook-form state with [
(same for other states)
router.refresh only re-fetch the RSC payload and re-render your page, which means your state won't be reset.You can try resetting the react-hook-form state with [
form.reset](https://react-hook-form.com/docs/useform/reset)(same for other states)
Answer
@fuma Be careful that `router.refresh` only re-fetch the RSC payload and re-render your page, which means your state won't be reset.
You can try resetting the react-hook-form state with [`form.reset`](https://react-hook-form.com/docs/useform/reset)
(same for other states)
Cape lionOP
Oh sweet, thanks. I'll look into that!
Cape lionOP
@fuma hmm, seems like I need to
reset after the refresh, but refresh does not return a promise, so not sure how to handle that.so your default values are based on the payload (the data passed from server component)?
Cape lionOP
Yeah... I guess I could do it properly and return the ids from the save and set them... 😅
useEffect with the data as dependency may be able to achieve that tooCape lionOP
oh interesting 🤔
And server action can also return something
Cape lionOP
It's weird, I'm trying, but it doesn't seem to do it...
I removed an item, hit save, do the refresh after saving is finished and log the data in the useEffect before
I removed an item, hit save, do the refresh after saving is finished and log the data in the useEffect before
reset() is called. I see in the updated data that the item was removed, but as soon as the form is reset, the item has been added again, as if it still has the previous state...Oh derp, I had to do
reset(customer) and pass in the data again 😅xD I used to make this mistake too, btw your problem is solved right?