Reactjs React Redux和React路由器连接

当我尝试在注销函数上调度事件时，它显示了一个错误。我认为我连接Redux的方式是错误的，但我不确定是否有人能解决这个问题？ 注销功能

 Auth.logout(() => {
      Firebase.auth().signOut().then(() => {
          this.props.updateState();
      });
 })

调度

 const mapDispatchToProps = dispatch => {
       return{
          updateState: () => dispatch({type: 'UPDATE_REDUX_STATE'})
       }
}

使用connect和withRouter导出

 export default withRouter(connect(null, mapDispatchToProps)(Navigation))

导航组件

class Navigation extends Component {
logoutHander(){
        Auth.logout(() => {
            Firebase.auth().signOut().then(() => {
                this.props.updateState();
            });
        })
}
render(){
    return(
        <div className="custom-container-fluid">
            <nav className="navbar navbar-expand-md text-center">
                <div className="container">
                    <a className="navbar-brand" href="/">FG</a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                    {
                        Auth.isAuthenticated() === true  ?
                        <ul className="navbar-nav ml-auto">
                            <li className="nav-item">
                                <Link className="nav-link" to="/home"><i className="fas fa-home" style={{marginRight: '3px'}}></i>Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/myrecipe"><i className="fas fa-stream" style={{marginRight: '3px'}}></i>My Recipes</Link>
                            </li>
                            <li className="nav-item"  onClick={this.logoutHander}>
                                <Link className="nav-link" to="/"><i className="fas fa-user" style={{marginRight: '3px'}}></i>Logout</Link>
                            </li>
                            <li className="nav-item upload-nav">
                                <Link className="nav-link" to="/uploadRecipe"><i className="fas fa-upload" style={{marginRight: '3px'}}></i>Upload Recipe</Link>
                            </li>
                        </ul>
                        :
                        <ul className="navbar-nav ml-auto">
                            <li className="nav-item">
                                <Link className="nav-link" to="/login"><button className="btn nav-btn-signup"><i className="fas fa-user" style={{marginRight: '3px'}}></i>Login</button></Link>
                            </li>
                        </ul>
                    }
                    </div>
                </div>
            </nav>
        </div>
    );
}

类导航扩展组件{
logoutHander（）{
身份验证注销（（）=>{
Firebase.auth（）.signOut（）。然后（（）=>{
this.props.updateState（）；
});
})
}
render（）{
返回(
{
Auth.isAuthenticated（）==真？


家


我的食谱


注销


上传配方


:


登录


}
);
}

---

我得到的错误是无法读取未定义的属性“props”

firebase方法中没有此引用

你能把这个实例值传递给其他变量吗？当前实例将在函数完成时被复制

constructor(props) {
  super(props);
}
logoutHander(){
        const self = this;
        Auth.logout(() => {
            Firebase.auth().signOut().then(() => {
                self.props.updateState();
            });
        })
}

---

您遇到了什么样的错误？显示导航组件以及如何使用该UpdateEstate Prop无法读取未定义的属性'props'，请在类构造函数（props）{super（props）；}中读取此代码。感谢您的帮助Palani samy！！我通过在Auth.logouth函数外部添加此.props.UpdateEstate（）解决了此问题