如何将 firebase 与 React 功能组件同步

Question

我想将我的组件 React 与 Firebase 同步，但我使用了一个功能组件，我在互联网上找到了一些答案，但它看起来很复杂并且对我不起作用我不能使用这个：useEffect(() => { base.syncState('/', { context: this, state: 'messages' }) });

我的密码是

import React,{useEffect, useState} from 'react'
import Formulaire from './component/Formulaire'
import Message from './component/Message'
import {useParams} from 'react-router-dom'
import database from './Base'
import { getDatabase, ref, set,onValue } from "firebase/database";

function App() {
  const [state , setState] = useState({
    messages : {},
    pseudo : useParams().pseudo,
  })
  const addMessage = (message) =>{
    state.messages[`message-${Date.now()}`] = message
    setState({pseudo : state.pseudo ,messages : state.messages})
  }

    const msg = Object.keys(state.messages)
    const lastMessages = msg.map(key=>{
      return <Message key={key} pseudo={state.messages[key].pseudo} message = {state.messages[key].message} />
    })
  return (
    <div className="container-lg col-4 mt-5">
      <div>
        {lastMessages}
      </div>
      <Formulaire length={150} addMessage ={addMessage} pseudo={state.pseudo} />
    </div>
  )
}



export default App

还有我的 firebaseApp 代码：

import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";

// TODO: Replace with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "AIzaSyB2CFjr32PoNdsnfvEgt_AijgE18lNKz2c",
  authDomain: "chat-app-42ed5.firebaseapp.com",
  projectId: "chat-app-42ed5",
  storageBucket: "chat-app-42ed5.appspot.com",
  messagingSenderId: "880643875911",
  appId: "1:880643875911:web:9d04114b45bb40c2627d62",
  measurementId: "G-MP1VZCGRDP"
};

const app = initializeApp(firebaseConfig);

// Get a reference to the database service
const database = getDatabase(app);

export default database

Answer 1

挂载App组件时，可以开启RTDB快照监听，see docs. You do that in useEffect and also return a function from useEffect to destroy the listener when your component gets unmounted. It's called a "cleanup function", see React docs

看起来像这样：

function App() {
 useEffect(() => {
    const unsubListener = onValue(ref(rtdb_instance, '/YOUR_PATH'), (snapshot) => {
      // Probably iterate over `snapshot.val()` and store it in your state
    })

    // Return cleanup function
    return unsubListener;
 }, [])
}

请注意，这里的依赖数组是空的，这意味着它不会改变。因此，它只会在初始挂载时执行。

另请注意，上面的代码未经测试，因此您的实际情况可能会有所不同。

Answer 2

我在 AddMessage 函数中使用我的函数 writeUserData() 提交消息后发送到实时数据库而不是在 UseEffect() 中，然后在刷新页面后获取消息我使用 onValue() 正如你在 UseEffect() 和同时我用 setState() 更新我的状态 ex: if (data) { setState（{消息：data.messages，伪：state.pseudo}） } return

import React,{useState,useEffect} from 'react'
import Formulaire from './component/Formulaire'
import Message from './component/Message'
import {useParams} from 'react-router-dom'
import database from './Base'
import { ref, set,onValue } from "firebase/database";

function App() {

  const [state , setState] = useState({
    messages : {},
    pseudo : useParams().pseudo,
  })
  
  useEffect(()=>{
  const resultDb = ref(database);
  onValue(resultDb, (snapshot) => {
  const data = snapshot.val();
  if (data) {
    setState({messages : data.messages , pseudo : state.pseudo})
  } return 
})
   return resultDb
  },[])

  function writeUserData(message) {
    set(ref(database), {
      messages :message
    });
  }

  const addMessage = (message) =>{
    state.messages[`message-${Date.now()}`] = message
    setState({pseudo : state.pseudo ,messages : state.messages})
    writeUserData(state.messages)
  }

  const msg = Object.keys(state.messages)
  const lastMessages = msg.map(key=>{
    return <Message key={key} pseudo={state.messages[key].pseudo} message = {state.messages[key].message} />
    })
  return (
    <div className="container-lg col-4 mt-5">
      <div>
        {lastMessages}
      </div>
      <Formulaire length={150} addMessage ={addMessage} pseudo={state.pseudo} />
    </div>
  )
}

export default App

如何将 firebase 与 React 功能组件同步

How to sync firebase with react functional components

reactjs

firebase-realtime-database