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

海原琢美

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

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

我叫火力文档和想过使用执行删除功能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

谢谢你。

若昂·佩雷拉

为什么不能使用该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添加到消息对象中。在您的 AppcomponentWillMount()方法中:

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

在您的 ChatMessageonRemoveClick()方法中:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从Firebase实时数据库中删除?

来自分类Dev

如何从Firebase实时数据库重新排序数据

来自分类Dev

如何从Firebase删除数据库?

来自分类Dev

用户注册期间如何在Firebase的实时数据库中存储数据?

来自分类Dev

如何从Firebase中的实时数据库获取数据

来自分类Dev

React + Firebase:如何添加项目以将数据列表到firebase实时数据库中

来自分类Dev

如何从云功能中引用Firebase的实时数据库?

来自分类Dev

如何使用python从Firebase实时数据库中删除

来自分类Dev

首次安装android应用时,如何从Firebase实时数据库获取数据库

来自分类Dev

如何从Web中的Firebase实时数据库获取数据?

来自分类Dev

数据更改后如何从Firebase实时数据库中检索特定数据

来自分类Dev

Flutter:如何从Firebase实时数据库中获取新添加的记录?

来自分类Dev

如何使用Firebase实时数据库中的键值或字段键删除所有字段和值?

来自分类Dev

如何从Firebase实时数据库获取最新记录

来自分类Dev

如何通过导出功能从Firebase实时数据库中获取用户孩子的价值

来自分类Dev

将新数据添加到特定子级后,如何使用云功能将数据写入Firebase实时数据库

来自分类Dev

如何从Firebase实时数据库读取数据

来自分类Dev

Angular中的Firebase实时数据库:如何添加值

来自分类Dev

在使用云功能时,如何使用Firebase Admin SDK更改Firebase实时数据库中的数据?

来自分类Dev

如何获取Firebase实时数据库中添加的最后一项?

来自分类Dev

如何更新Firebase实时数据库中的位置?

来自分类Dev

确定是否向 Firebase 实时数据库添加或删除数据

来自分类Dev

如何从 Firebase 实时数据库正确检索值?

来自分类Dev

如何从firebase实时数据库中选择数据

来自分类Dev

删除 firebase 实时数据库中的数据时,如何从列表中删除特定项目?

来自分类Dev

如何获取firebase实时数据库的数据

来自分类Dev

如何在 Google Cloud 服务器中触发实时数据库字段(不在 Firebase 的功能中)

来自分类Dev

如何使用云功能将新数据推送到 firebase 实时数据库?

来自分类Dev

如何设置 Firebase 实时数据库的双重查询?

Related 相关文章

  1. 1

    如何从Firebase实时数据库中删除?

  2. 2

    如何从Firebase实时数据库重新排序数据

  3. 3

    如何从Firebase删除数据库?

  4. 4

    用户注册期间如何在Firebase的实时数据库中存储数据?

  5. 5

    如何从Firebase中的实时数据库获取数据

  6. 6

    React + Firebase:如何添加项目以将数据列表到firebase实时数据库中

  7. 7

    如何从云功能中引用Firebase的实时数据库?

  8. 8

    如何使用python从Firebase实时数据库中删除

  9. 9

    首次安装android应用时,如何从Firebase实时数据库获取数据库

  10. 10

    如何从Web中的Firebase实时数据库获取数据?

  11. 11

    数据更改后如何从Firebase实时数据库中检索特定数据

  12. 12

    Flutter:如何从Firebase实时数据库中获取新添加的记录?

  13. 13

    如何使用Firebase实时数据库中的键值或字段键删除所有字段和值?

  14. 14

    如何从Firebase实时数据库获取最新记录

  15. 15

    如何通过导出功能从Firebase实时数据库中获取用户孩子的价值

  16. 16

    将新数据添加到特定子级后,如何使用云功能将数据写入Firebase实时数据库

  17. 17

    如何从Firebase实时数据库读取数据

  18. 18

    Angular中的Firebase实时数据库:如何添加值

  19. 19

    在使用云功能时,如何使用Firebase Admin SDK更改Firebase实时数据库中的数据?

  20. 20

    如何获取Firebase实时数据库中添加的最后一项?

  21. 21

    如何更新Firebase实时数据库中的位置?

  22. 22

    确定是否向 Firebase 实时数据库添加或删除数据

  23. 23

    如何从 Firebase 实时数据库正确检索值?

  24. 24

    如何从firebase实时数据库中选择数据

  25. 25

    删除 firebase 实时数据库中的数据时,如何从列表中删除特定项目?

  26. 26

    如何获取firebase实时数据库的数据

  27. 27

    如何在 Google Cloud 服务器中触发实时数据库字段(不在 Firebase 的功能中)

  28. 28

    如何使用云功能将新数据推送到 firebase 实时数据库?

  29. 29

    如何设置 Firebase 实时数据库的双重查询?

热门标签

归档