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.

where onRouteChange function is coming from? is it your function or a library function? if it yours - what is it doing? — LiranC, Apr 22 '19 at 08:02

score 3 · Accepted Answer · answered Apr 22 '19 at 08:08

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 '19 at 08:08

Pho Huynh

1,497
3
13
23

It helped. Thank you so much! But why did it help? – Freecs Apr 22 '19 at 08:15

Why do my React App reload after fetching data?

1 Answers1