React - Firebase _ 错误：名为“[DEFAULT]”的 Firebase 应用程序已存在

Question

我是 React 的初学者，目前我尝试将我的第一个应用程序连接到 Firebase 数据库。 我有这个问题，我不知道如何解决 我试过这是解决但我不知道把它放在哪里 所以任何人都可以帮助我

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

这是我的代码

import React, { useState, useEffect } from "react";
import Note from "./components/Note/Note";
import NoteForm from "./components/NoteForm/NoteForm";
import { DB_CONFIG } from "./components/config/config";
import firebase from "firebase/app";
import "firebase/database";
import "./App.css";

function App() {
  // Intialize Firebase
  const firebaseApp = firebase.initializeApp(DB_CONFIG);
  const db = firebaseApp
    .database()
    .ref()
    .child("notes");
  // State Of Project
  const [notes, setNotes] = useState([]);
  // UseEffect
  useEffect(() => {
    db.on("child_added", snap => {
      const notesState = [...notes, { id: snap.key, title: snap.val().title }];
      setNotes(notesState);
    });
  });
  // Add Note Function
  const addNote = note => {
    db.push().set({ title: note });
  };
  return (
    <div className="notesWrapper">
      <div className="notesHeader">
        <div className="heading">React Firebase Notes</div>
      </div>
      <div className="notesBody">
        {notes.map(note => (
          <Note key={note.id} note={note} />
        ))}
      </div>
      <div className="notesFooter">
        <NoteForm addNote={addNote} />
      </div>
    </div>
  );
}

export default App;

Answer 1

错误原因：当您多次初始化同一个 Firebase 应用程序（在这种情况下其名称为“DEFAULT”）时，这是您遇到的典型错误。多次初始化正在发生，因为组件本身会重新渲染多次。

修复：修复此问题的最简单方法是您已经要做的事情，即在初始化应用程序之前检查应用程序的长度。您可以将检查应用程序长度移动到您的功能组件中：

import React, { useState, useEffect } from "react";
import Note from "./components/Note/Note";
import NoteForm from "./components/NoteForm/NoteForm";
import { DB_CONFIG } from "./components/config/config";
import firebase from "firebase/app";
import "firebase/database";
import "./App.css";

function App() {
  // Intialize Firebase if it has not been previously initialized
  if (!firebase.apps.length) {
    firebase.initializeApp({});
  }

  const db = firebase
    .database()
    .ref()
    .child("notes");

  // ... The rest of your code
}

export default App;

注意事项：

• 您不需要存储对 firebase 初始化的引用

Answer 2

这很可能是因为您在每次应用组件重新呈现时都初始化应用。尝试在组件外部初始化 firebase。

编辑：

import Note from "./components/Note/Note";
import NoteForm from "./components/NoteForm/NoteForm";
import { DB_CONFIG } from "./components/config/config";
import firebase from "firebase/app";
import "firebase/database";
import "./App.css";

// move this outside the component
const firebaseApp = firebase.initializeApp(DB_CONFIG);


function App() {
  // Intialize Firebase
  const db = firebaseApp
    .database()
    .ref()
    .child("notes");
  // State Of Project
  const [notes, setNotes] = useState([]);
  // UseEffect
  useEffect(() => {
    db.on("child_added", snap => {
      const notesState = [...notes, { id: snap.key, title: snap.val().title }];
      setNotes(notesState);
    });
  });
  // Add Note Function
  const addNote = note => {
    db.push().set({ title: note });
  };
  return (
    <div className="notesWrapper">
      <div className="notesHeader">
        <div className="heading">React Firebase Notes</div>
      </div>
      <div className="notesBody">
        {notes.map(note => (
          <Note key={note.id} note={note} />
        ))}
      </div>
      <div className="notesFooter">
        <NoteForm addNote={addNote} />
      </div>
    </div>
  );
}

export default App;