React Redux и React Router соединяются

Question

, когда я пытаюсь отправить событие в функции выхода из системы, это показывает мне ошибку. Я думаю, что способ подключения 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>
    );
}

Ошибка, которую я получаю Невозможно прочитать свойство 'props' из неопределенного

Answer 1

Эта ссылка отсутствует в методе firebase,

вы можете передать значение этого экземпляра в другую переменную, текущий экземпляр будет скопирован, когда функция завершится

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