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

最可能发生这种情况的原因是，每次您的App组件重新发布时，您都会初始化该应用程序。尝试在组件外部初始化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;

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

2 个答案: