history.push not working in fetch callback - reactjs

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));

Answer 1

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! :)