无法在React Native中使用Firebase Auth调用已卸载组件上的setState

时间:2018-10-01 22:57:51

标签: reactjs firebase react-native firebase-authentication

我在每次重新加载时都显示此警告,我不知道如何调试它,我在互联网上获取了一些信息,发现的只是this.mount的声明,并在设置为true时使用if语句声明setState,我实现了它没有用,请有人看看我的代码,让我知道发生了什么。在使用firebase身份验证的github上,人们遇到类似的问题,我仍在寻找那些隐藏的问题

export default class Login extends Component {
static navigationOptions = { header: null };
  constructor(props) {
     super(props)
     this.state = {
       currentUser: '',
       loading: false,
       error: null,
       UserInput: "",
       loggedIn: null,
       loggedOut: null,
       email: '', password: '',
     }
   }

   componentDidMount = () => {
     this.setState({ loading: true });
     firebase.auth().onAuthStateChanged((user) => {
       if(user) {
         const { navigate } = this.props.navigation;
         navigate('SponsorScreen')
         this.setState({ loggedIn: true, loggedOut: false, loading: false  });
       }
       else {
         this.setState({ loggedIn: false, loggedOut: true, loading: false });
       }
     });
    }

  onLogIn = () => {
    this.setState({ loading: true });
    const { email, password } = this.state;
    Keyboard.dismiss()
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(this.onSuccess.bind(this))
    .catch(() => {
      this.refs.modal.open();
      this.setState({ loading: false });
    })
  };

  onSignUp = () => {
    const { email, password } = this.state;
    this.setState({ loading: true });
    Keyboard.dismiss()
    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(this.onSuccess.bind(this))
    .catch(() => {
      this.refs.modal.open();
      this.setState({loading: false});
    })
  };

  onSuccess() {
    this.setState({
      email: '',
      password: '',
      loading: false,
      error: ''
    });
  };


render() {
  const { navigate } = this.props.navigation;
  return (

1 个答案:

答案 0 :(得分:2)

在firebase.auth成功后的componentDidMount中,必须使用setstate回调成功地执行setstate之后导航

componentDidMount = () => {
 this.setState({ loading: true });
 firebase.auth().onAuthStateChanged((user) => {
   if(user) {
     const { navigate } = this.props.navigation;

     this.setState({ loggedIn: true, loggedOut: false, loading: false  }, () => {
         navigate('SponsorScreen')
     });
   }
   else {
     this.setState({ loggedIn: false, loggedOut: true, loading: false });
   }
 });
}