im trying to show progressLoader to the user in login screen until web service response comes. it works when i press the login button. problem is im getting this.setState is undefined
when i try to hide it from this line this.setState({showLoader: false})
in the response. even i set context properly to the like in this question this.setState is not a function
export default class Loginform extends Component{
constructor(props){
super(props);
this.state = {
username: '',
password: '',
showLoader: false,
}
this._login = this._login.bind(this);
}
/** Login Web Service **/
_login(){
this.setState({showLoader: true})
const { username, password } = this.state;
console.log(username);
let formdata = new FormData();
formdata.append("username", username)
formdata.append("password", password)
formdata.append("device_type", 'I')
fetch('http://www.URL.com/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
.then(function(response) {
if(response.status == 200) return response.json();
else throw new Error('Something went wrong on api server!');
this.setState({showLoader: false})
})
.then(function(response) {
console.debug(response);
this.setState({showLoader: false}) /** Im Getting Error here **/
})
.catch(function(error) {
console.error(error);
this.setState({showLoader: false})
});
}
render(){
return(
{this.state.showLoader && }
{/* */}
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(username) => this.setState({username})}/>
ref={(input) => this.passwordInput = input}
onChangeText={(password) => this.setState({password})}/>
LOGIN
);
}
}
Answer
You just need to bind the context of the fetch .then() callback and .catch() callback
so that setState
is available for you
fetch('http://www.URL.com/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
.then(function(response) {
if(response.status == 200) return response.json();
else throw new Error('Something went wrong on api server!');
this.setState({showLoader: false})
}.bind(this))
.then(function(response) {
console.debug(response);
this.setState({showLoader: false})
}.bind(this))
.catch(function(error) {
console.error(error);
this.setState({showLoader: false})
}.bind(this));
or
fetch('http://www.URL.com/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
.then((response) => {
if(response.status == 200) return response.json();
else throw new Error('Something went wrong on api server!');
this.setState({showLoader: false})
})
.then((response) =>{
console.debug(response);
this.setState({showLoader: false})
})
.catch((error)=> {
console.error(error);
this.setState({showLoader: false})
});
No comments:
Post a Comment