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

我有一个使用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>
            )
        }
}

class HeaderParentComponent扩展组件{
切换SignupLayOverAction（事件）{
this.props.toggleSignupLayover（“true”）
}
签名（e）{
e、 预防默认值（）；
var email=$（“.login email”）.val（）；
var password=$（“.login user password”）.val（）；
firebase.auth（）.signInWithEmailAndPassword（电子邮件，密码）。然后（函数（用户）{
var user=firebase.auth（）.currentUser；
this.props.logUserIn（用户）；
}).catch（函数（错误）{
//在这里处理错误。
var errorCode=error.code；
var errorMessage=error.message；
// ...
});
}
render（）{
返回(
你好{this.props.LoggedInUsername}
登录
)
}
}

---

目前从父级传递下来的道具有一个基本的console.log“logged in”。它通过

this.props.logUserIn（user）传递道具。问题是，我试图在Firebase的身份验证成功后调用此函数，因此我将其放在一个.then函数中，在
.signInWithEmailAndPassword（email，password）
之后，似乎我无法从Auth函数内部调用
this.props.logUserIn
，但我不知道为什么。如果我将props函数移到auth函数之外，它将调用它，这没有问题。为什么我不能从那里访问道具？
这是因为
then（函数）
中的匿名函数中存在
This
。您实际上是在尝试执行
window.props.logUserIn（user）
，这显然是不需要的

为了解决这个问题，您可以使用ES6，它不绑定
this
，并引用封闭上下文的组件。使用箭头功能，
此
将不是
窗口
，而是组件，并将正确执行方法：

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之前的一种方法是在常规函数上使用显式绑定
this
上下文和其他参数到函数。下面是一个例子：

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

这是因为
匿名函数之外的
是组件，上下文被传递给函数


您需要一个
构造函数
，它在类实例化时被调用，并且需要使用
道具
。请参阅，使用：

使用箭头功能Care来详细说明并感谢您的解释，现在有意义了为什么没有提到道具。我已经将另一个函数转换为箭头，但这次不起作用。相反，我现在得到一个控制台错误TypeError:无法读取未定义（…）的属性“props”。这里的代码如果你能看一下的话会很神奇嘿@Andrew这里是所有JSX的提琴。如果你能帮我解决这个问题，我会投票的@BenLiger你需要一个构造函数method@BenLiger对这只是课堂上的一种方法。他们建造班级并传递道具。请参阅更新的answer@BenLiger在正则函数中有一个箭头函数。检查您的
updateProfile
promise。
constructor(props) {
    super(props);

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

    };*/
}  

//...

signIn(e) {
   //...
}