无法在 firebase 重定向结果中使用 Redux 道具

Posted 2023-03-22

【中文标题】无法在 firebase 重定向结果中使用 Redux 道具

【英文标题】：Can't use Redux props in firebase redirect results

【发布时间】：2020-04-30 18:25:18

【问题描述】：

我正在尝试在 React + Redux + Firebase 中构建 Google 身份验证。我想在谷歌认证后创建用户。但 this.props.createUser() 在 Firebase 上重定向后无法正常工作。

TypeError: 无法读取未定义的属性“props”

app/src/components/home.js

import React,  Component  from "react";
import  connect  from "react-redux";
import firebase from "../config/firebase";
import  createUser  from "../actions";

class Home extends Component 
  constructor(props) 
    super(props);

    this.state = 
      user: null
    ;
  

  async componentWillMount() 
    console.log("this", this.props);
    firebase.auth().onAuthStateChanged(user => 
      this.setState( user );

      if (user) 
        this.props.history.push("/user/settings");
      
    );

    firebase
      .auth()
      .getRedirectResult()
      .then(function(result) 
        if (result.credential) 
          var token = result.credential.accessToken;
          console.log("token", token);
        
        var user = result.user;
        // Successfully got a user but type error in below
        this.props.createUser(user);
      )
      .catch(function(error) 
        console.log("error", error);
      );
  

  onLogin = () => 
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithRedirect(provider);
  ;

  render() 
    return (
      <button className="btn btnPrimary" onClick=this.onLogin>
        <span>Google Signin</span>
      </button>
    );
  


function mapStateToProps( user ) 
  return  user: user ;


export default connect(mapStateToProps,  createUser )(Home);

app/src/actions/index.js

import firebase from "../config/firebase";

export function createUser(user) 
  console.log('user', user)

【参考方案1】：

由于您使用function 关键字声明回调，因此函数内部的this 指的是函数本身，而不是您声明componentWillMount 方法的类。

最简单的解决方案是使用粗箭头符号，就像您已经在其他地方所做的那样：

firebase
  .auth()
  .getRedirectResult()
  .then((result) => 
    if (result.credential) 
      var token = result.credential.accessToken;
      console.log("token", token);
    
    var user = result.user;
    // Successfully got a user but type error in below
    this.props.createUser(user);
  )

关于问题的原因，另见这个答案，以及其他解决方案：How to access the correct `this` inside a callback?

【参考方案2】：

这里需要使用箭头函数：

firebase
  .auth()
  .getRedirectResult()
  .then(function(result) 
    if (result.credential) 
      var token = result.credential.accessToken;
      console.log("token", token);
    
    var user = result.user;
    // Successfully got a user but type error in below
    this.props.createUser(user);
  )
  .catch(function(error) 
    console.log("error", error);
  );

应该是：

firebase
  .auth()
  .getRedirectResult()
  .then((result) => 
    if (result.credential) 
      var token = result.credential.accessToken;
      console.log("token", token);
    
    var user = result.user;
    // Successfully got a user but type error in below
    this.props.createUser(user);
  )
  .catch(function(error) 
    console.log("error", error);
  );

The function() keyword is eating your this value.