如何将火基与反应功能组件同步

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组件时，您可以打开快照侦听器，请参阅文档。您可以在使用中执行此操作，还可以从使用返回一个函数，以在组件卸下时销毁侦听器。它称为“清理功能”，请参阅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;
 }, [])
}

请注意，依赖关系数组在这里是空的，这意味着它不会更改。因此，它将仅在Inital Mount上执行。

另请注意，上面的代码未测试，因此您的里程可能会有所不同。

Answer 2

我在提交消息后在 AddMessage 函数中使用我的函数 writeUserData() 发送到实时数据库而不是在 UseEffect() 中，然后在刷新页面后获取消息我使用 onValue() 正如您在 UseEffect() 中所说的那样，同时我更新我的状态与 setState() ex: if (data) {
setState({消息: data.messages, 伪: state.pseudo})
} 返回

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