javascriptreactjsfetch

Why do my React App reload after fetching data?


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.


Solution

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