Question

我在使用我的React应用程序集成firebase时遇到了问题。我使用create-react-app制作应用程序并拥有快速后端。

到目前为止，我已添加：

<!-- Firebase Services -->
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-database.js"></script>

<!-- ReactFire -->
<script src="https://cdn.firebase.com/libs/reactfire/1.0.0/reactfire.min.js"></script>

<script>
    var config = {
        apiKey: "***********************",
        authDomain: "****************",
        databaseURL: "******************",
        projectId: "***********",
        storageBucket: "*************",
        messagingSenderId: "***********"
    };

    firebase.initializeApp(config);
</script>

到我的index.html，并在组件中尝试了import * as firebase from 'firebase';以便调用

   handleSubmit(e) {
           e.preventDefault();
           firebase.auth()
           .createUserWithEmailAndPassword(this.state.emailValue, 
            this.state.passValue)
           .catch((error) => {
               console.error(error)
           })
       }

同时：

firebase.auth().onAuthStateChanged((user) => {
if (user) {
    console.log('user logged in')
} else {
    console.log('not logged in')
}})

但是给了我标题中说明的错误。

我不确定为什么会这样，也不确定我是否正确地将firebase与我的React应用程序集成？

我是应该单独使用ReactFire，还是像我们在用户身份验证的文档中所说的那样配置它？

Answer 1

我这样做的方法是在一个像这样的lib文件夹中创建一个单独的firebase文件。

//lib/fire.js
import firebase from 'firebase'
const config = {
        apiKey: "***********************",
        authDomain: "****************",
        databaseURL: "******************",
        projectId: "***********",
        storageBucket: "*************",
        messagingSenderId: "***********"
};

firebase.initializeApp(config);

export const db = firebase.database()
export const auth = firebase.auth()

然后在我的组件中......

//component.js
import React from 'react'
import {auth} from '../lib/fire'
export default class extends React.Component {
  constructor() {
    super()
    this.state = {
      email: '',
      pass: ''
    }
  }
  handleLogin() {
    const { email, pass } = this.state
    auth.signInWithEmailAndPassword(email, pass).then(user => {
      <do something with user>
    }).catch(err => console.log(err.message))
  }
  render() {
    return (
      <div>... form stuffs </div>
    )
  }
}

显然你需要处理表单输入和一切，但我的观点是你应该/可以以这种方式使用auth或数据库。这似乎是普遍接受的做法。

Answer 2

您没有导入Firebase init javascript文件，因为firebase.initializeApp（config）无效。除了各个firebase服务，您还需要获取init文件。您可以参考此处列出的示例应用程序：https://github.com/firebase/quickstart-js/blob/master/auth/email.html#L35

Firebase：没有Firebase应用程序＆＃39; [DEFAULT]＆＃39;已创建 - 调用Firebase App.initializeApp（）

2 个答案: