Question

我有一个使用Firebase进行身份验证的登录功能，然后应该调用从父级传递下来的登录功能作为道具。这是：

class HeaderParentComponent extends Component { 
    toggleSignupLayoverAction(event){
        this.props.toggleSignupLayover("true")
    }
    signIn(e){

        e.preventDefault();
        var email = $(".login-email").val();
        var password = $(".login-user-password").val();

        firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {  
            var user = firebase.auth().currentUser;
            this.props.logUserIn(user);
        }).catch(function(error) {
        // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
  // ...
        });

    }
    render() {
        return (
            <div className="header-inner">
                <span onClick={this.props.toggleMenuOut} className="menuToggle"></span>
                <a className="logo-a-tag" href="#">
                    <img height="25" src="../../images/logo.png" alt="my logo"/>
                </a>
                <form className="header-searchbox">
                    <input placeholder="Search Samples Here..." onChange={this.props.updateSearch} value={this.props.searchInputVal} type="text"></input>
                </form>
                <div className="header-acc"><a className={"login " + this.props.loggedInState} href="#">Login</a><a onClick={this.toggleSignupLayoverAction.bind(this)} className={"create " + this.props.loggedInState} href="#">Create Account</a>
                <div className={"logged-in-header " + this.props.loggedInState}>Hello {this.props.LoggedInUsername}</div>
                </div>
                <div className="login-popup-par">
                    <form>
                        <input placeholder="Email Address" className="login-email" type="text"></input>
                        <input placeholder="Password" className="login-user-password" type="password"></input>
                        <button onClick={this.signIn.bind(this)}>Login</button>
                    </form>
                </div>
            </div>
            )
        }
}

目前从父母传下来的道具有一个基本的console.log＆＃34;登录＆＃34;。它通过this.props.logUserIn(user);道具向下传递。问题是我试图在使用Firebase进行身份验证后成功调用此功能因此为什么我在.signInWithEmailAndPassword(email, password)之后的.then函数中它似乎无法从Auth内部调用this.props.logUserIn功能，但我不明白为什么。如果我将props函数移动到auth函数之外，它会调用它没问题。为什么我不能从那里访问道具？

Answer 1

这是因为this by default refers to the window object中匿名函数中的then(function)。你有效地尝试window.props.logUserIn(user)，这显然是不可取的。

要解决此问题，您可以使用不绑定this的ES6 arrow functions，并引用封闭上下文即组件的ES6 Function.prototype.bind。使用箭头函数，this将不是window，而是组件并将正确执行该方法：

firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {  
    var user = firebase.auth().currentUser;
    this.props.logUserIn(user);
}).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
});

执行此操作的ES6之前的方法是在常规函数上使用here来显式绑定this上下文和函数的其他参数。这是一个例子：

firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {  
    var user = firebase.auth().currentUser;
    this.props.logUserIn(user);
}.bind(this));
//...

这是有效的，因为匿名函数外部的this是组件，并且上下文被传递给函数。

您需要在类实例化时调用constructor，并且需要使用props。请参阅compression library，使用：

constructor(props) {
    super(props);

    /*this.state = { //for state if needed

    };*/
}  

//...

signIn(e) {
   //...
}

React / Firebase - 无法从auth函数中调用this.props

1 个答案: