Question

这是我现在正面临的问题，以前在单页面Web应用程序中我可以在任何地方访问firebase.auth()，现在每次我尝试使用config时我都无法定义并且不知道是否用户是否登录。请有人协助，以上代码可以100％正常工作，问题出在show()函数上

import fire from '../../../config/Fire';


  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.signup = this.signup.bind(this);
    this.state = {
      email: '',
      password: '',
      loading: false,
      fullname: '',
    };
  }

  login(e) {
    this.setState({ loading:true });
    e.preventDefault();
    fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
      this.setState({ loading:false });

    }).catch((error) => {
        console.log(error);
      });

  }

  show() {
    const { currentUser } = fire.auth();
    this.setState({ fullname: currentUser.displayName })
  }

...

<Button onClick={this.show} color="dark" className="px-4">Show</Button>

<h2 className="mb-5">{this.state.fullname}</h2>

Answer 1

this.setState在show function中不起作用的原因是您没有绑定show function。您需要在构造函数中绑定show函数，例如

constructor(props) {
super(props);
this.login = this.login.bind(this);
this.handleChange = this.handleChange.bind(this);
this.signup = this.signup.bind(this);
this.show = this.show.bind(this);
this.state = {
  email: '',
  password: '',
  loading: false,
  fullname: '',
};
}

show() {
   const { currentUser } = fire.auth();
   this.setState({ fullname: {currentUser ? currentUser.displayName: ""} })
 }

如果您不想手动进行绑定，请使用箭头功能，例如

show = () => {
  const { currentUser } = fire.auth();
  this.setState({ fullname: currentUser ? currentUser.displayName: "" })
}

Answer 2

问题出在Firebase函数上，这需要花费一些时间才能从Firebase检索或搜索

现在，在执行此操作时，调用Firebase函数的状态已经消失。在Firebase函数中调用this.state时，它引用的是当前更新状态，而应调用其中调用Firebase函数的旧状态。

通过在任何地方编写多个console.log语句发现了！

假设我们有一个像这样的函数

show = () =>{
    console.log("1"); 

    firebase.anyFirebaseFunction({
        console.log("2"); 
    });

    console.log("3");
}

现在通常输出为

但是由于有Firebase函数调用，它将是...

因此获得对原始状态的引用，并通过该引用获得setState。尝试使用各种绑定，但没有用。所以像这样尝试...

login(e) {
    //Get the state reference here
    let oldstate=this;

    this.setState({ loading:true });
    e.preventDefault();
    fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
          //use it like this
          oldstate.setState({ loading:false });
        //this.setState({ loading:false });

    }).catch((error) => {
        console.log(error);
      });

  }

  show() {
    const { currentUser } = fire.auth();
    this.setState({ fullname: currentUser.displayName })
  }

这也是您的.auth()将null存储在currentUser中，登录尚未完成并且预先调用.auth()函数的原因。

反应不记得firebase状态错误this.setState不是一个函数

2 个答案: