我通过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 {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] 删除。
我来说两句