Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/368.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Can';不要在firebase重定向结果中使用Redux道具_Javascript_Reactjs_Firebase_Redux_Firebase Authentication - Fatal编程技术网

Javascript Can';不要在firebase重定向结果中使用Redux道具

Javascript Can';不要在firebase重定向结果中使用Redux道具,javascript,reactjs,firebase,redux,firebase-authentication,Javascript,Reactjs,Firebase,Redux,Firebase Authentication,我正在尝试在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 fr

我正在尝试在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);
import firebase from "../config/firebase";

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

由于您使用
函数
关键字声明回调,因此函数中的
引用函数本身,而不是您声明
组件将装入的类
方法

最简单的解决方案是使用胖箭头表示法,正如您在其他地方所做的那样:

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

另请参见关于问题原因的回答和其他解决方案:

您需要在此处使用箭头功能:

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