Как добавить функцию удаления данных из базы данных Firebase Realtime

Question

Я создаю систему чата React и Firebase.
Данные системы чата управляются Firebase RealTimeDatabase.
Теперь сайт здесь
URL: https://react -chat-b0e8a.firebaseapp.com/
Github: https://github.com/kaibara/React-chat

Я пытаюсь создать функцию удаления данных.
Однако я не смог найти элемент для добавления в child().
Потому что я не могу использовать remove() код.

Я вызвал документацию firebase и подумал о реализации функции удаления, используя update () и set () и т. Д.
Однако, поскольку child () не может быть указан, ни один из них не может быть использован.

Хотите поделиться, как идентифицировать child() в Firebase RealtimeDatabae или реализовать функцию удаления данных?

Теперь код здесь.
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()