使用react-google-login无法访问Google Login的回调函数中的道具

Question

我在我的react-redux项目中使用react-google-login ，无法访问存在该登录按钮的组件的props。 我用反应Facebook的登录以同样的方式，它工作正常-但是， console.log(this)在loginGoogle()函数打印“不确定”，而它印代表全JavaScript对象Login我的类似组件loginFacebook()方法。 关于如何在loginGoogle()访问this.props的任何想法？

在我的登录组件中：

//all needed import statements

class Login extends Component {

  loginGoogle(response) {
    console.log(response);
    this.props.loginGoogleRequest(response.profileObj.email, response.accessToken, response.tokenObj.expires_in)
  }

  render() {
    <GoogleLogin
      clientId="{client id here}"
      onSuccess={this.loginGoogle}
      className="custom-google-btn"
    />
  }

function mapDispatchToProps(dispatch) {
  return {
    loginGoogleRequest: (email, accessToken, expiresIn) => {
      //some code that isn't being reached
    }
  }
}

export default connect(mapDispatchToProps)(Login);

为了使该类更具可读性，我从该类中减少了很多内容-请让我知道如果以任何方式包含更多代码是否有帮助。

Answer 1

尝试将loginGoogle定义更改为Arrow函数： loginGoogle(response) { => loginGoogle = (response) => {

箭头函数不会创建自己的“ this”，而是使用封闭执行上下文的this值。

或者您可以绑定loginGoogle方法，请参考以下答案： 为什么JSX道具不应该使用箭头功能