Firebase和React js - Firebase：Firebase应用程序已命名为“[DEFAULT]”（app/duplicate-app）

Question

首先，我已经审查了我的代码，没有看到任何可能初始化app超过一次的地方（除非我漏掉了什么）。

我知道这个问题以前已经被问过和解答过，但我不确定如何将解决方案应用到我的代码中，因为我刚刚开始使用Firebase。

我收到的错误是：Firebase App named '[DEFAULT]' already exists (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
    })
  }

- George Bleasdale

Answer 1

解决方案非常简单

在条件块中初始化Firebase。

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

分析: 如果我们不在条件块内执行“初始化Firebase”的操作，它会因为重新初始化而变得混乱。

附加说明: 这个问题与配置组件无关，出于安全考虑，我们应该尽量避免披露Firebase配置凭据。

- perfectionist1

---

Firebase配置是完全安全的，可以分享：https://dev59.com/zVoU5IYBdhLWcg3wamca - Raine Revere

Answer 2

如果在这种情况下您的应用程序已被定义，那么您的问题将得到解决。

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

- sdkcy

Answer 3

当您尝试再次初始化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 语句包装代码的情况下运行此代码。

祝您好运！

- DrewT

---

我尝试将那段代码粘贴到构造函数中，但现在出现了另一个错误 - TypeError: 无法读取未定义的属性'database' new App - George Bleasdale

是的，那会发生。这是一种竞争条件，因为如果您尝试使用尚未准备好的某些属性来运行挂载数据库，它将抱怨。在调用 this.database = this.app.database().ref.child('notes') 之前，您需要等待 Firebase 应用程序准备就绪。 - DrewT

如果您查看构造函数，您会发现您正在连续调用 this.app = firebase.initializeApp(DB_CONFIG); this.database = this.app.database().ref.child('notes')，这意味着这些命令将同时处理。您可以使用延迟承诺来同步链接它们，或者您可以在 componentDidMount 中稍后分配 this.database 值。 - DrewT

Answer 4

当你在构造函数中使用React并放置initializeApp时，可能会发生这种情况。

最好将this.app = firebase.initializeApp(DB_CONFIG);调用放在componentDidMount中；

- opd