如何在 React 中使用 firebase 数据库

Question

我第一次尝试在 React 应用程序上使用 firebase，但我在文档中找不到正确的步骤。

那是我的 config.js for firebase（当然我在这里隐藏了我的凭据）

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "*************************",
  authDomain: "****************",
  databaseURL: "**********************",
  projectId: "**********",
  storageBucket: "***************",
  messagingSenderId: "************",
  appId: "***************",
  measurementId: "***********"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export default app;

在我的文件中 App.js 我有这个 :

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router';
import "./App.css";
import Message from "./components/Message";
import MessageEditor from "./components/MessageEditor";

import firebase from './config'

function App(){
  
  const [messages, setMessages] = useState({});
  const [pseudo, setPseudo] = useState(useParams().pseudo)


  useEffect(()=> {
    firebase.syncState('/', {
      context: this,
      state: 'messages'
    })
  })
}

在我遇到的错误中，有一个告诉我 syncState 不是一个函数！

Answer 1

Firebase 没有名为 syncState 的函数。这就是您收到此错误的原因。

我想你尝试使用 re-base: https://firebaseopensource.com/projects/tylermcginnis/re-base/.

但它还没有更新，所以我建议您只使用普通的 firebase 库。

1 设置：https://firebase.google.com/docs/web/setup

2 实时数据库设置：https://firebase.google.com/docs/database/web/start

如何在 React 中使用 firebase 数据库

How to use firebase database with React

reactjs

firebase-realtime-database