Question

我通过React和Firebase创建聊天系统。
聊天系统的数据由Firebase RealTimeDatabase管理。
现在在这里
网址：https://react-chat-b0e8a.firebaseapp.com/
GitHub：https://github.com/kaibara/React-chat

我试图创建数据删除功能。
但是，我找不到要放在child()中的元素。
因为，我不能使用remove()代码。

我打电话给Firebase文档，并考虑过使用update ()和set ()等实现删除功能。
但是，由于无法指定child ()，因此无法使用它们。

您想分享如何在Firebase RealtimeDatabae中识别child()或实现数据删除功能吗？

现在在这里输入代码。
App.js

import React, { Component } from 'react'
import firebase from 'firebase/app'
import { firebaseApp,firebaseDB } from './firebase/firebase'
import ChatMessage from './components/ChatMessage'

const firebaseDB = firebase.database()
const messagesRef = firebaseDB.ref('messages')

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text : "",
      user_name: "",
      messages : []
    }
  }

  componentWillMount() {
      messagesRef.on('child_added', (snapshot) => {
        const m = snapshot.val()
        console.log({m})
        let msgs = this.state.messages
        msgs.push({
          'text' : m.text,
          'user_name' : m.user_name
        })
        this.setState({
          messages : msgs
        })
      })
    }

  render() {
    return (
      <div className="App">
        <div className="MessageList">
          <h2>メッセージログ</h2>
          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} message={m}/>
          })}
        </div>
      </div>
    )
  }
}

export default App;

ChatMessage.js

import React,{Component} from 'react'
import { firebaseDB } from '../firebase/firebase'

const firebaseDB = firebase.database()
const messagesRef = firebaseDB.ref('messages')

class ChatMessage  extends Component {
  onRemoveClick(){
    console.log(messagesRef.child(key))
  }
  render(){
    return(
      <div className="Message">
        <p className="MessageText">{this.props.message.text}</p>
        <p className="MessageName">by&nbsp;{this.props.message.user_name}</p>
        <button className="MessageRemove" onClick={this.onRemoveClick}>削除</button>
      </div>
    )
  }
}

export default ChatMessage

谢谢。

Answer 1

为什么不能使用remove()函数？

删除数据的最简单方法是在引用上调用remove（）   该数据的位置。

您还可以通过将null指定为另一次写入的值来删除   set（）或update（）之类的操作。您可以将这种技术用于   update（）可以在一个API调用中删除多个子代。

https://firebase.google.com/docs/database/web/read-and-write#delete_data

为了获取密钥，每次添加一个孩子时，您都必须将密钥存储在数据结构中，并带有一些对消息的引用，以供以后使用。在child_added事件处理程序上，您可以通过snapshot.key在回调中获取它。

在您的删除消息事件处理程序中，从您的数据结构中检索正确的密钥并调用此密钥：

messagesRef.child(key).remove()

考虑当前的实现，请将key值添加到消息对象。在您的应用componentWillMount()方法中：

msgs.push({
   'text' : m.text,
   'user_name' : m.user_name
   'key': snapshot.key
 })

在您的ChatMessage onRemoveClick()方法中：

 messagesRef.child(this.props.message.key).remove()

如何添加Firebase实时数据库的删除数据功能

1 个答案: