remix-run / react-router

Declarative routing for React

Home Page:https://reactrouter.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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

  1. Create a fetcher
const fetcher = useFetcher()
  1. Render the form
<fetcher.Form action="/route" method="POST">
<input name="new name"/>
<button type="submit">Submit</button>
</fetcher.Form>
  1. Click the submit button to submit the form.

  2. Wait for fetcher.state to transition from idle to submitting and back to idle.

  3. Inspect fetcher.data and see that it is undefined.

  4. 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' })
}
  1. Wait for fetcher.state to transition from idle to submitting and back to idle.

  2. 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:

  1. 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.

  2. Interestingly, fetcher.state will transition from submitting to idle during fetcher.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! 🙂