Question

我试图在登录屏幕中向用户显示progressLoader，直到Web服务响应到来。它按下登录按钮时有效。当我尝试将其隐藏在响应中的此行this.setState is undefined时，问题就是this.setState({showLoader: false})。即使我在这个问题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>
        );
    }
}

Answer 1

您只需要绑定fetch .then() callback and .catch() callback的上下文，以便setState可供您使用

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

或

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

this.setState不是一个函数，即使其上下文设置正确也未定义

1 个答案: