[Bug]: `fetcher.data` is define when submitting via `fetcher.submit` but is undefined when submitting a `fetcher.Form`
dlindahl opened this issue · comments
What version of React Router are you using?
6.21.1
Steps to Reproduce
- Create a
fetcher
const fetcher = useFetcher()
- Render the form
<fetcher.Form action="/route" method="POST">
<input name="new name"/>
<button type="submit">Submit</button>
</fetcher.Form>
-
Click the submit button to submit the
form
. -
Wait for
fetcher.state
to transition fromidle
tosubmitting
and back toidle
. -
Inspect
fetcher.data
and see that it isundefined
. -
Add a click event to the submit button:
function onClick(event) {
event.preventDefault()
const formData = new FormData(event.target.form)
fetcher.submit(formData, { action: '/route', method: 'POST' })
}
-
Wait for
fetcher.state
to transition fromidle
tosubmitting
and back toidle
. -
Inspect
fetcher.data
and see that is contains the response from the action.
Expected Behavior
A fetcher.Form
interaction should resolve to the same state as an explicit call to fetcher.submit
.
Actual Behavior
fetcher.submit
receives the action response whereas fetcher.Form
interactions do not.
NOTES:
-
Changing the click handler to a submit handler prevents
fetcher.data
from being set as well, even though the event handler code is the same. -
Interestingly,
fetcher.state
will transition fromsubmitting
toidle
duringfetcher.Form
interaction before the router action actually completes (though this may just be a result of async functions doing their thing)
I should note that if this is the intended behavior, documenting that behavior would be much appreciated.
Could you provide a reproduction? Both ways of submitting are working for me in this example: https://codesandbox.io/p/sandbox/dark-leaf-hmvm3l
This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂