Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: useActionData return wrong data after redirection from action #9333

Closed
jrakotoharisoa opened this issue Sep 23, 2022 · 9 comments · Fixed by #9334 or #9772
Closed

[Bug]: useActionData return wrong data after redirection from action #9333

jrakotoharisoa opened this issue Sep 23, 2022 · 9 comments · Fixed by #9334 or #9772
Assignees
Labels

Comments

@jrakotoharisoa
Copy link
Contributor

What version of React Router are you using?

6.4.1

Steps to Reproduce

Pull this repository: https://github.com/jrakotoharisoa/react-router-sandbox

  1. Submit form with empty value to trigger error from action
  2. Enter a value in input and submit form

Expected Behavior

On the redirecting page, action data should be null

Actual Behavior

Action data on the redirecting page correspond to old action data returned when the form on previous page was in error.

@jrakotoharisoa
Copy link
Contributor Author

actionData in router state seems to not being reset when redirection is trigger from an action.

@brophdawg11
Copy link
Contributor

Merged and should be available in 6.4.2 - hopefully released this week 👍

@jrakotoharisoa
Copy link
Contributor Author

👍 Thanks @brophdawg11 !

@BaggioGiacomo
Copy link

BaggioGiacomo commented Nov 25, 2022

Looks like that #9334 hasn't completely fixed this issue 🤔

Context

I have an action that returns an error if there's an error or return a redirect if everything is fine:

export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const myData = formData.getAll("input-name")

  const { validation } = await validateData(myData); //This return a VerificationState enum (valid or invalid)
 
  if (validation === VerificationState.invalid) {
    return {
      error: "not valid",
    };
  }
  return redirect(".");
};

If we submit invalid data, useActionData() hook will return error: "not valid" as expected.
Then, if we submit valid data, we still get error: "not valid" by useActionData() hook instead of getting undefined

What version of React Router are you using?

6.4.3

@brophdawg11
Copy link
Contributor

@BaggioGiacomo Can I ask why you're doing a redirect if the intention is to stay at the same location? I think return null would keep the same behavior in your app and fix the issue you're seeing?

@BaggioGiacomo
Copy link

BaggioGiacomo commented Nov 28, 2022

@brophdawg11 We're trying to stick with the same approach that we'd use in Remix. To enable progressive enhancement aren't we supposed to redirect after a post request? I know this doesn't really matter on a client side app, but if we want to move to Remix later, shouldn't we redirect in order to render fresh data on the page?

@brophdawg11
Copy link
Contributor

Ah, ok - yeah generally that's the recommended approach, but I don't think you technically need to do that if it's to the current location, because that's what the browser would do without JS in the first place (reload the entire page at the form action location). That being said, I do think it's probably a bug and actionData should be cleared on redirect regardless of the new location. I'll re-open and take a look at a fix 👍

@brophdawg11
Copy link
Contributor

This should have been fixed by the above PR :)

@BaggioGiacomo
Copy link

BaggioGiacomo commented Jan 24, 2023

Thanks! @brophdawg11 💪🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
3 participants