Firebase Auth Signout 没有推送到 React 网络应用程序中的主页

Question

我有一个“注销”按钮，在提交时显然会删除用户会话。

单击按钮时令牌将被删除，然后我希望它在成功删除令牌后重定向到主页。但是，单击按钮时会出现以下错误：

未处理的承诺拒绝：TypeError：undefined is not an object (evaluating 'this.props')

我不明白为什么会这样，因为原则上代码类似于调用“this.props.history.push”的其他函数。

这是我的组件：

class ProfileBox extends Component {

  constructor(props) {

    super(props)

  }

  async signOut(e) {

    e.preventDefault()

    await firebase.auth().signOut().then(function() {

      console.log("Successfully signed out.")

    }).catch(function(error) {

      console.log(error)

      console.log("An error occurred")

    });

    this.props.history.push("/");

  }

  render() {

    return (

          <button className="profile-box-logout" type="submit" name="button" onClick={this.signOut}>Logout</button>

    )

  }

}

谁能指出我做错了什么？class ProfileBox extends Component {

  constructor(props) {

    super(props)

  }

  async signOut(e) {

    e.preventDefault()

    await firebase.auth().signOut().then(function() {

      console.log("Successfully signed out.")

    }).catch(function(error) {

      console.log(error)

      console.log("An error occurred")

    });

    this.props.history.push("/");

  }

  render() {

    return (

          <button className="profile-box-logout" type="submit" name="button" onClick={this.signOut}>Logout</button>

    )

  }

}

谁能指出我做错了什么？

Answer 1

该问题与 Firebase 无关。this在该函数内部为 null，这会引发错误。如果您将函数移动到渲染器中，那么它将起作用。尝试这样的事情：render() {    const signOut = async (e) => {      e.preventDefault();      await firebase.auth().signOut().then(function() {        console.log("Successfully signed out.")      }).catch(function(error) {        console.log(error)        console.log("An error occurred")      });      this.props.history.push("/");    }        return (      <button        className="profile-box-logout"        type="submit"        name="button"        onClick={signOut}      >        Logout      </button>    );  }这将使您可以访问this.props.