history.push not working in fetch callback

Question

I am working on simple react js application where I am authenticating user and if he/she has successfully logged in I am trying to redirect to home page but I am in some strange situation. Please help me through the below code.

Below is the code for a function fetchAPI to call to server with some input params

function fetchAPI(methodType, url, data, callback){

    fetch(url,{
        method: methodType,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)  
    })
    .then(response => response.json())
    .then(data => callback(data) )
    .catch(error => callback(data));  

}

Now I am calling it this way

fetchAPI("POST", Constants.LOGIN, data, function(callback) {
        if(callback.status == 200) {
            console.log(callback.message);
            this.props.history.push("/home");
        }else if( typeof callback.status != "undefined"){
            alertModal("Alert", callback.message);
        }
      });

The problem with this is that its not redirecting to /home as mention in response condition but only prints success message. But when I directly use the fetch api like below code it redirects me to /home

can anybody help me out why is this happening with me ??

fetch(Constants.LOGIN, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => response.json())
        .then(data => {
          if (data.status == 200) {
            this.props.history.push("/home");
          } else if (typeof data.status != "undefined") {
            alertModal("Alert", data.message);
          }
        })
        .catch(error => callback(data));

In your `fetchAPI` call, `this` seems out of context. Is there any error in the logs or in console? — c-chavez, Sep 16 '18 at 18:41
No , nothing their in console except the `console.log(callback.message);` — Abhi Burk, Sep 16 '18 at 18:42

c-chavez · Accepted Answer · 2018-09-18T17:31:31.103

OK, forget about callbacks, I've been there, no more CALLBACK HELL.

Use promises always, and you can simplify everything by using async/await:

async function fetchAPI(methodType, url, data){
    try {
        let result = await fetch(url, {
            method: methodType,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)  
        }); // wait until request is done
        let responseOK = response && response.ok;
        if (responseOK) {
            let data = await response.json();
            // do something with data
            return data;
        } else {
            return response;
        }
    } catch (error) {
        // log your error, you can also return it to handle it in your calling function
    }
}

in your React Component:

async someFunction(){
    let result = await fetchAPI("POST", Constants.LOGIN, data); // wait for the fetch to complete
    if (!result.error){
        // get whatever you need from 'result'
        this.props.history.push("/home");
    } else {
        // show error from 'result.error'
    }
}

Now your code looks more readable!

The errors in fetch are in either result.error or result.statusText, I stopped using fetch a long time ago, switched to Axios. Have a look at my answer on some differences between the 2 Here.

EDIT BASED ON YOUR RESPONSE

Ok, based on the code you posted:

import React from "react";
import Constants from "../Constants.jsx";
import { withRouter } from "react-router-dom";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      errors: []
    };
  }

  showValidationErr(elm, msg) {
    this.setState(prevState => ({
      errors: [...prevState.errors, { elm, msg }]
    }));
  }

  clearValidationErr(elm) {
    this.setState(prevState => {
      let newArr = [];
      for (let err of prevState.errors) {
        if (elm != err.elm) {
          newArr.push(err);
        }
      }
      return { errors: newArr };
    });
  }

  onEmailChange(e) {
    this.setState({ email: e.target.value });
    this.clearValidationErr("email");
  }

  onPasswordChange(e) {
    this.setState({ password: e.target.value });
    this.clearValidationErr("password");
  }

  submitLogin(e) {
    e.preventDefault();

    const { email, password } = this.state;
    if (email == "") {
      this.showValidationErr("email", "Email field cannot be empty");
    }
    if (password == "") {
      this.showValidationErr("password", "Password field cannot be empty");
    }

    if (email != "" && password != "") {
      var data = {
        username: this.state.email,
        password: this.state.password
      };


        // I added function keyword between the below line
        async function someFunction(){
          let result = await fetchAPI("POST", Constants.LOGIN, data); // wait for the fetch to complete
          if (!result.error){
              this.props.history.push("/home");  // Here is the error
          } else {
              // show error from 'result.error'
          }
        }
        someFunction();
    }


  }

  render() {  ......................

####-----This is function definition------####

async function fetchAPI(methodType, url, data){
    try {
        let response = await fetch(url, {
            method: methodType,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)  
        }); // wait until request is done
        let responseOK = response && response.ok;
        if (responseOK) {
            let data = await response.json();
            // do something with data
            return data;
        } else {
            return response;
        }
    } catch (error) {
        return error;
        // log your error, you can also return it to handle it in your calling function
    }
}

This is the idea, you should make async the function that is calling the API. In your example, your function submitLogin has to be async since it will call an async function inside. As long as you call an async function, the caller MUST be async, or handle the promise accordingly. This is how it should be:

  async submitLogin(e) {
    e.preventDefault();

    const { email, password } = this.state;
    if (email == "") {
      this.showValidationErr("email", "Email field cannot be empty");
    }
    if (password == "") {
      this.showValidationErr("password", "Password field cannot be empty");
    }

    if (email != "" && password != "") {
      var data = {
        username: this.state.email,
        password: this.state.password
      };

      let result = await fetchAPI("POST", Constants.LOGIN, data); // wait for the fetch to complete
      if (!result.error) {
        this.props.history.push("/home");  // Here is the error
      } else {
        // show error from 'result.error'
      }
    }

If the function is correctly bound in the constructor, you won't have any problems with this. It seems that you are not binding the submitLogin function in the constructor, which will give you problems with the context of this. This is how it should be bound:

constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      errors: []
    };

    // bind all functions used in render
    this.submitLogin = this.submitLogin.bind(this);
  }

Have a look at this article to learn more about the problem with the context of this.

Now, based on the code you provided, seems to me that you are in uncharted territory. If you think that you are finding the routing hard or the async/await is not clear, I suggest you don't use them, and first master the React basics (the syntax problem you are having is an example, you shouldn't have put that function there, also the binding issue with this).

Have a read at this post for example, to have a general idea and I also suggest you try other more simple examples before using async, fetch, or routing. When you get the React lifecycle clear, you can continue from there, and use async functions, and then routers.

I also suggest you follow the examples in the Official docs and also have a look at this post to have a better understanding of async/await.

These suggestions are of course given so that you get to master React with clear fundamentals, and in the future don't have any problems with the basics! :)

Okay and thanks for your response I will surely try this one. — Abhi Burk, Sep 16 '18 at 19:30
Hey sorry but their is syntax errors in your call function code here `async someFunction(){` — Abhi Burk, Sep 17 '18 at 07:00
your answer has few syntax errors and I have corrected in my code. Now their is this error in my console `this is undefined` for line `this.props.history..` — Abhi Burk, Sep 17 '18 at 07:32
@AbhiBurk there is no syntax error in `async someFunction(){` if the function is used inside a React component. Also, as long as you are using the router correctly, there shouldn't be any problems with `this`. How are you using the solution I provided? Can you upload your final code somewhere in a fiddle or your original question please? — c-chavez, Sep 17 '18 at 16:26
And dont we have to use like this `async function someFunction() {` ? — Abhi Burk, Sep 18 '18 at 07:52
Please note that I am using withRouter to export the component. — Abhi Burk, Sep 18 '18 at 08:50
@AbhiBurk I've edited my answer, please have a look. Hope this info helps! — c-chavez, Sep 18 '18 at 18:57
Okay looks great answer but I have already bind submitLogin in onClick of my html form. — Abhi Burk, Sep 18 '18 at 19:44
@AbhiBurk did it work? If not, publish your code after these changes to have a look. — c-chavez, Sep 19 '18 at 06:03
Yeah its working now perfectly after making `async submitLogin...`. Thanks — Abhi Burk, Sep 19 '18 at 11:58

history.push not working in fetch callback

1 Answers1