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.