React-Native：状态不是用setState更新？

Question

我试图将“加载”的状态从true更改为false，但当我调用一个函数并在该函数中设置“this.setState（{loading:false}）”时，加载状态仍然保持true。

在下面的代码中，当按钮按钮函数被调用时，它将“加载”状态设置为真，但当用户成功登录“加载”状态时，应该变为假，这样我的渲染按钮函数将重新渲染，旋转器可以隐藏自己并显示按钮。

为什么LoginSAccess函数中的“加载”状态没有变为false？

class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            name: '',
            email: '',
            password: '',
            errorMessage: '',
            loading: false,
        };
    }
    //after successfully login with email and password
    onLoginSuccess(){
        this.setState({
            email: '',
            password: '',
            errorMessage: '',
        });
        this.setState({loading: false});
        this.props.buttonPress;
    }
    
    // to render either button or spinner
    renderButton(){
        if(this.state.loading){
            return <Spinner />;
        }else{
            return (
                <TouchableOpacity style={styles.button} onPress={this.buttonPressed.bind(this)} >
                    <Text style={styles.buttonText}>{this.props.userAction}</Text>
                </TouchableOpacity>
            );
        }
    }
    
    //setting loading state to true and authenticating user
    buttonPressed(){
        const { name, email, password, loading } = this.state;

        this.setState({errorMessage: '', loading: true});

        if(this.props.userAction==='Login'){
            firebase.auth().signInWithEmailAndPassword(email, password)
                .then(()=>{
                    console.log("sign in");
                    this.onLoginSuccess.bind(this);
                    console.log(this.state.loading); // to get current state at console
                })
                .catch((error) => {
                    let errorCode = error.code;
                    if(errorCode==='auth/user-not-found'){
                        console.log(this.state.errorMessage+' user not found');
                        this.setState({errorMessage: 'authentication failed'});
                    }else if(errorCode==='auth/wrong-password'){
                        console.log(this.state.errorMessage+' wrong password');
                        this.setState({errorMessage: 'authentication failed'});
                    }else{
                        console.log(this.state.errorMessage);
                        this.setState({errorMessage: 'authentication failed'});
                    }
                });
        }
        //User Sign Up
        else{
            firebase.auth().createUserWithEmailAndPassword(email, password);
        }
        
    }

    render(){
        return (
            <View style={styles.container}>
                
                <Input 
                    placeholder="Email" 
                    keyboardType="email-address"
                    value={this.state.email}
                    onChangeText={(email)=> this.setState({email})}
                />
                <Input 
                    placeholder="Password" 
                    keyboardType="default"   
                    secureTextEntry={true}
                    value={this.state.password}
                    onChangeText={(password)=> this.setState({password})}
                />
                {this.renderButton()}
                <Text>{this.state.errorMessage}</Text>
            </View>
        );
    }
}

export default Login;

更新-------

这是成功登录后的控制台输出，登录前没有输出

Answer 1

在@Hunaid-Hassan的回答之上：

onLoginSuccess = () => {//making it arrow will let you avoid using bind
    this.setState(() => ({
        email: '',
        password: '',
        errorMessage: '',
        loading: false
    }));
    this.props.buttonPress;//<-what is it? do you meant to call it? this.props.buttonPress();
}

Answer 2

this.onloginsucess.bind（this） 此行实际上不会调用函数。

将this.onLogin成功=this.onLoginSuccess.bind（this）；放入构造函数中，然后在Firebase auth回调中调用这样的函数this.onLogin成功（）。

Answer 3

正如Hunaid Hassan所说，您不是在执行函数this.onloginsucess.bind（this），您可以在构造函数中绑定或使用箭头函数来避免绑定（请参见下面的代码）。

onLoginSuccess = () => {
    this.setState({
        email: '',
        password: '',
        errorMessage: '',
        loading: false,
    }, () => { console.log(this.state.loading) }); // callback function to be called after state is updated
    this.props.buttonPress; // this function isn't executed do this.props.buttonPress() instead
}