如何添加Firebase实时数据库的删除数据功能 [英] How to add remove data function of Firebase Realtime Database

问题描述

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

I creating chat system by React and Firebase.
The data of chat stystem is managemented by Firebase RealTimeDatabase.
Now site here
URL: https://react-chat-b0e8a.firebaseapp.com/
Github: https://github.com/kaibara/React-chat

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

I trying to create data remove function.
However, I could not find an element to put in child().
Because, I can't use remove() code.

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

I called firebase documentation and thought about implementing the delete function using update () and set () etc.
However, since child () can not be specified, none of them could be used.

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

Would you like to share how to identify child() in Firebase RealtimeDatabae or implement data deletion function?

此处是现在的代码.
App.js

Now codes here.
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

谢谢.

推荐答案

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

删除数据的最简单方法是在引用上调用remove() 该数据的位置.

The simplest way to delete data is to call remove() on a reference to the location of that data.

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

You can also delete by specifying null as the value for another write operation such as set() or update(). You can use this technique with update() to delete multiple children in a single API call.

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

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

In order to get the key, every time a child is added, you'll have to store the keys in a data structure alongside some reference to the message for later usage. On your child_added event handler, you can get it in your callback through snapshot.key.

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

In your remove message event handler, retrieve the correct key from your data structure and call this:

messagesRef.child(key).remove()

考虑当前的实现，将key值添加到消息对象.在您的App componentWillMount()方法中:

Considering your current implementation, add the key value to the message object. In your App componentWillMount() method:

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

在您的ChatMessage onRemoveClick()方法中:

In your ChatMessage onRemoveClick() method:

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

这篇关于如何添加Firebase实时数据库的删除数据功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！