How to add remove data function of Firebase Realtime Database

问题

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

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.

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.

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

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

Thank you.

回答1:

Why can't you use the remove() function?

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

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

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()

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
 })

In your ChatMessage onRemoveClick() method:

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

来源：https://stackoverflow.com/questions/54854542/how-to-add-remove-data-function-of-firebase-realtime-database

标签

javascript

reactjs

firebase

firebase-realtime-database