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

我不明白为什么它不起作用，因为重定向到这里的登录页面是完全一样的并且可以工作。

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

反应路由器重定向-无法读取未定义的属性'props'

1 个答案: