Reactjs 反应路由器重定向-无法读取属性'；道具'；未定义的

有人能帮我理解这里出了什么问题吗

我正在尝试在注销后重定向到登录页面

这是代码

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);

import React，{Component}来自“React”；
从“./firebase/firebase”导入firebase；
从“react router dom”导入{withRouter，Redirect}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
this.logout=this.logout.bind（this）；
}
状态={}；
注销=e=>{
e、 预防默认值（）；
火基
.auth（）
.signOut（）
.那么(
函数（）{
控制台日志（“注销”）；
this.props.history.push（“/login”）；
},
函数（错误）{
控制台错误（“注销错误”，错误）；
}
);
};
render（）{
返回(
主页




你好：{this.state.user}
注销
);
}
}
使用路由器导出默认值（主）；

以下是错误消息

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:无法读取未定义的属性“props”

---

我不明白为什么它不工作，因为我的登录页面重定向这里是完全一样的，这是工作

您的问题是您传递的匿名函数

。然后
。尝试用粗箭头或类似的东西替换它：

  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);
  }

在
console.log（'Signed Out'）之后你可以把
控制台日志（这个）并告诉你看到了什么？这看起来像是一个范围问题。不是
不起作用吗？啊哈！！！这是在
此
的上下文发生更改时使用匿名函数的问题。将firebase回调的
函数（）
替换为
（）=>
，它将按预期工作。-是的，我们应该使用箭头函数和@praveen，我们也可以这样做：根据文档，您可以只做
或
-这只是一个建议。