如何解决这些错误？ _this2.state不是函数＆_this3.state不是函数？

Question

我需要解决这些错误。

首先，如果我单击登录按钮，则会使我返回错误=> _this2.state不是函数

和

第二，如果我单击注册按钮，则会使我退回错误=> _this3.state不是函数

如何解决这个问题？

---

这是我下面的代码

export default class LoginScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        email: '',
        password: '',
        error: '',
        loading: false,
    };

    this.onLoginPress = this.onLoginPress.bind(this);
    this.onSignUpPress = this.onSignUpPress.bind(this);
  }

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

    const {email, password} = this.state;
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(()=> {
        this.state({error:'', loading:false});
        this.props.navigation.navigate('Profile');
    }) 
    .catch(()=>{
        this.state({error:'Authentication Failed!', loading:false})
    })
  }

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

    const {email, password} = this.state;
    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(()=> {
        this.state({error:'', loading:false});
        this.props.navigation.navigate('Profile');
    }) 
    .catch(()=>{
        this.state({error:'Authentication Failed!', loading:false})
    })
  }

  renderButtonOrLoading(){
    if( this.state.loading ){
        return <Text>Loading ...</Text>
    } else {
        return(
            <View>
                <Button 
                title="Login" 
                onPress={this.onLoginPress}/>
                <Button 
                title="Sign Up" 
                onPress={this.onSignUpPress}/>
            </View>
        );
    }
  }

  render() {
    return(
        <View>
            <FormLabel>Email</FormLabel>
            <FormInput onChangeText={email => this.setState({email})}/>
            <FormLabel>Password</FormLabel>
            <FormInput onChangeText={password => this.setState({password})}/>
            <FormValidationMessage>Error Message</FormValidationMessage>
            { this.renderButtonOrLoading() }
        </View>
    );
  }
}

Answer 1

尝试将this.state和onLoginPress中的onSignUpPress更改为this.setState

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

  const {email, password} = this.state;
  firebase.auth().signInWithEmailAndPassword(email, password)
    .then(()=> {
      // Fix below line
      this.setState({error:'', loading:false});
      this.props.navigation.navigate('Profile');
    }) 
    .catch(()=>{
      // Fix below line
      this.setState({error:'Authentication Failed!', loading:false})
    })
  }

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

    const {email, password} = this.state;
    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(()=> {
      // Fix below line
      this.setState({error:'', loading:false});
      this.props.navigation.navigate('Profile');
    }) 
    .catch(()=>{
      // Fix below line
      this.setState({error:'Authentication Failed!', loading:false})
    })
  }

Answer 2

1. 使用此按钮绑定renderButtonOrLoading或使用箭头功能。
2. 在onLoginPress和onSignUpPress函数中，将this.state（{error：''，loading：false}）替换为 this.setState（{error：``，loading：false}）;

让我知道它是否有效。