this.setState is not a function and undefined even its context set properly

Question

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(
            <View style={styles.container}>
                  <View style={styles.spinnerContainer}>
                     {this.state.showLoader && <LinesLoader />}
                     {/*<TextLoader text="Please wait" />*/}
                 </View>
            <View style={styles.formContainer}>
                <TextInput style={styles.input} placeholder="Username" keyboardType="email-address" returnKeyType="next"
                onSubmitEditing={() => this.passwordInput.focus()}
                onChangeText={(username) => this.setState({username})}/>

                <TextInput style={styles.input} placeholder="Password" secureTextEntry returnKeyType="go"
                ref={(input) => this.passwordInput = input}
                onChangeText={(password) => this.setState({password})}/>

                <TouchableOpacity style={styles.buttonContainer} onPress={this._login}>
                    <Text style={styles.buttonText}>LOGIN</Text>
                    </TouchableOpacity>

                    </View>
            </View>
        );
    }
}

score 1 · Accepted Answer · answered Apr 11 '17 at 17:21

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

Thanks it worked. i tried it once only putting bind(this) to ending part. i never thought it needed add in all 3 . — Im Batman, Apr 11 '17 at 17:30

this.setState is not a function and undefined even its context set properly

1 Answers1