Why do my React App reload after fetching data?

Question

After getting user email and password and getting access to enter, app goes to user profile page and goes after that to sign in form again. That happened when I added .then(data => ...). One more issue is that I'm using POST method but after signing in at first time I can see email and password in URL and it stays there after going to sign in form again. And again if I remove .then(data => ...) everything works fine with POST method.

onSubmitSignIn = () => {
        fetch('http://localhost:3000/signin', {
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
            email: this.state.signInEmail,
            password: this.state.signInPassword 
            })
        })
        .then(response => response.json())
        .then(data => {
               if (data === 'success') {
                   this.props.onRouteChange('home');
               }
        });
    };

This function is for Sign In button. .onRouteChange('home') just shows what components should app show.

<input type="submit" onClick={this.onSubmitSignIn} value="Sign in"/> — Freecs
– Freecs, Commented Apr 22, 2019 at 7:17
where onRouteChange function is coming from? is it your function or a library function? if it yours - what is it doing? — LiranC
– LiranC, Commented Apr 22, 2019 at 8:02

Pho Huynh · Accepted Answer · 2019-04-22 08:08:05Z

3

You didn't provide the whole thing but one thing I can help with the submit is to stop the default behavior of the form:

onSubmitSignIn = (event) => {
  // ...
  event.preventDefault();
}

Try this first then go figure other things later.

answered Apr 22, 2019 at 8:08

Pho Huynh

1,5873 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Freecs Over a year ago

It helped. Thank you so much! But why did it help?

SKB_BGPL · Accepted Answer · 2024-08-30 09:08:55Z

Just adding what was happening in my case (especially since probably not many would think of searching with 'dotnet' in their question)

If the backend being used is DotNet, and in Visual Studio, you may see "aspnetcore-browser-refresh" script logging in devtools console. Regardless you can check if its active in your project and disable it:

Go to Tools > Options > Projects and Solutions > ASP.NET Core
Disable CSS Hot Reload
For Auto build and refresh, ensure the selected option is not Refresh browser after build or Auto build and refresh browser after build
Go to the Standard Toolbar > Browser Link.
Uncheck Enable Browser Link and Enable CSS Hot Reload

Apparently, this was not an app-refresh instead a whole page reload and only happened when a button press leads to an api call having a response.

Source: https://developercommunity.visualstudio.com/t/No-way-to-stop-aspnetcore-browser-refres/10376962

Collectives™ on Stack Overflow

Why do my React App reload after fetching data?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related