React Router Router重定向 - 无法读取未定义的属性“道具”

Question

任何人都可以帮助我了解这里出了什么问题吗？

我试图在签名后重定向到登录页面。

这是代码

import React, { Component } from "react";
import firebase from "../Firebase/firebase";
import { withRouter, Redirect } from "react-router-dom";
class Home extends Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }
  state = {};
  logout = e => {
    e.preventDefault();
    firebase
      .auth()
      .signOut()
      .then(
        function() {
          console.log("Signed Out");
          this.props.history.push("/login");
        },
        function(error) {
          console.error("Sign Out Error", error);
        }
      );
  };
  render() {
    return (
      <div align="center" className="container">
        <h1> Home page </h1>
        <br />
        <br />
        <h2>Hello: {this.state.user} </h2>
        <button
          className="btn btn-lg text-white"
          style={{ backgroundColor: "#B65DF3" }}
          onClick={this.logout}
        >
          Logout
        </button>
      </div>
    );
  }
}
export default withRouter(Home);

这是错误消息

TypeError：无法读取未定义的属性

我不明白为什么它是我的登录页面不起作用的，在这里重定向是完全相同并且有效的。

Answer 1

您的问题将是您通过.then的匿名函数。尝试用脂肪箭或类似的东西代替：

  logout = (e) => {
        e.preventDefault();
        firebase.auth().signOut().then(this.handleResolve).catch(this.handleError)
    }
  handleResolve = () => {
    console.log('Signed Out');
    this.props.history.push('/login')
  }
  handleError = (error) => {
    console.error('Sign Out Error', error);
  }