Firebase和React js-Firebase:名为“ [DEFAULT]”的Firebase应用已存在(应用/重复应用)

时间:2019-01-05 18:54:23

标签: javascript reactjs firebase

首先,我已经遍历了我的代码,并且看不到任何地方可能会多次初始化应用程序(除非我遗漏了一些东西)。

我知道之前已经有人问过这个问题,但是由于我刚开始使用Firebase,所以我不确定如何将解决方案应用于自己的代码。

我遇到的错误是:名为'[DEFAULT]'的Firebase应用已存在(app / duplicate-app)。

这是我的配置组件:

     export const DB_CONFIG = {
      apiKey: "AIzaSyDj_UQoRkOWehv-Ox2IAphOQPqciE6jL6I",
      authDomain: "react-notes-38f8a.firebaseapp.com",
      databaseURL: "https://react-notes-38f8a.firebaseio.com",
      projectId: "react-notes-38f8a",
      storageBucket: "react-notes-38f8a.appspot.com",
      messagingSenderId: "1063805843776"
    };

这是App.js

      constructor(props){
      super(props);
      this.app = firebase.initializeApp(DB_CONFIG);
      this.database = this.app.database().ref.child('notes')
      this.state = {
        notes: [
        ],
      }
    }

  componentWillMount(){
    const previousNotes = this.state.notes;
    this.database.on('child_added', snap => {
      previousNotes.push({
        id: snap.key,
        noteContent: snap.val().noteContent
      })
    })
    this.setState({
      notes: previousNotes
    })
  }

4 个答案:

答案 0 :(得分:1)

解决起来很简单

在条件块中初始化Firebase。

Vue Date Data: Thu Oct 08 2020 19:00:00 GMT+0300 (Eastern European Summer Time) 

Controller Request Date Data: 2020-10-08T16:00:00.588Z

分析:如果我们不愿意在条件块内执行“初始化Firebase” ,则会因重新初始化。

其他说明:此问题与 config 组件无关。并且出于安全目的,我们应尽量不要公开Firebase配置凭据。

答案 1 :(得分:0)

如果在这种情况下定义了您的应用,则将解决您的问题。

if (!firebase.apps.length) {
   firebase.initializeApp(DB_CONFIG);
}

答案 2 :(得分:0)

当您尝试一次又一次初始化firebase时,会发生此错误。应该只初始化一次,以避免Firebase app named ‘[DEFAULT]’ already exists,并且要实现此目的,您将不得不更改初始化样式。

您可以按照@sdkcy的建议,使用if(!firebase.apps.length) { firebase.initializeApp(DB_CONFIG) };进行此操作,或者,为了获得额外的安全性,您还可以添加try / catch语句,例如:

if (!firebase.apps.length) {
    try {
        firebase.initializeApp(DB_CONFIG)
    } catch (err) {
        console.error(‘Firebase initialization error raised’, err.stack)
    }
}

使用try / catch语句,无论是否捕获到错误,您的应用程序都应继续运行而不会中断。因此,如果您想弄清楚为什么两次调用构造函数,也可以不带if语句就尝试这段代码。

祝你好运!

答案 3 :(得分:0)

当您使用React并将initializeApp放入构造函数中时,会发生这种情况。

最好将this.app = firebase.initializeApp(DB_CONFIG);呼叫放入componentDidMount;