Question

在我的React项目上设置Firebase Auth期间。单击按钮后，我无法使Auth Pop up触发。

单击按钮后在控制台内部引发错误，或者刷新页面后自动打开身份验证（预期onClick侦听器是一个函数，而得到的值是object类型。）

// Initialize Firebase
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const config = {
  apiKey: "myKeyHere",
  authDomain: "domain",
  databaseURL: "url",
  projectId: "idb",
  storageBucket: "bucket",
  messagingSenderId: "id"
};
firebase.initializeApp(config);
window.firebase = firebase;
export const firestore = firebase.firestore();
export const auth = firebase.auth();

export const provider = new firebase.auth.GoogleAuthProvider();
export const signInWithGoogle = () => auth.signInWithPopup(provider);

const settings = { timestampsInSnapshots: true };
firestore.settings(settings);

export default firebase;

这是我的组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import signInWithGoogle from "../../firebase";

    class Header extends Component {
      constructor(props) {
        super(props);
      }
      render() {
        console.log(this.props);
        return (
          <nav className="header">
            <button onClick={signInWithGoogle}>Sign in</button>
          </nav>
        );
      }
    }
    const mapStateToProps = state => state;

    export default connect(mapStateToProps)(Header);

如您所见，“登录”按钮应触发Firebase的signInWithGoogle箭头功能，但onClick会引发错误。

Answer 1

我认为问题在于您正在从“ ../../firebase”导入默认导出，即“ firebase”而不是登录功能。

要解决此问题，只需在导入中添加大括号{}，以便导入命名的导出而不是默认的导出：

import { signInWithGoogle } from "../../firebase";

Firebase身份验证期望onClick侦听器是一个函数，而是使用object类型的值

这是我的组件：

1 个答案: