React Native Firebase聊天应用程序-为新传入的消息添加侦听器
React Native Firebase聊天应用程序-为新传入的消息添加侦听器
提问于 2020-11-04 22:15:09
我正在我的应用程序中创建一个利用Firebase的聊天功能。我已经阅读了有关添加事件侦听器的文档，但我似乎无法让侦听器更新状态(我相信当状态更新时，应用程序会重新呈现，并应具有新的传入消息)
用例:你正在和某人聊天，你已经打开了消息/聊天屏幕，并且不想刷新页面才能看到新的消息……它们应在消息发布到数据库时显示
componentDidMount() {
this.setState({ isLoading: true })
this.pullMessages()
this.listener()
this.setState({ isLoading: false }) pullMessages = () => {
let messagesArray = []
if (this.state.chatroomDetails.users.length === 2) {
firebase.firestore().collection('chatrooms').doc('private').collection(this.state.chatroomDetails.key).doc('messages').collection('messages').get().then((querySnapshot) => {
if (!querySnapshot.empty) {
querySnapshot.forEach((doc) => {
messagesArray.push(doc.data())
this.setState({ messages: messagesArray })
})
}
})
}
else {
firebase.firestore().collection('chatrooms').doc('group').collection(this.state.chatroomDetails.key).doc('messages').collection('messages').get().then((querySnapshot) => {
if (!querySnapshot.empty) {
querySnapshot.forEach((doc) => {
messagesArray.push(doc.data())
// console.log(messagesArray)
this.setState({ messages: messagesArray })
})
} else {
console.log('Nothing to Grab')
}
})
}
} listener = () => {
let messagesArray = []
if (this.state.chatroomDetails.users.length === 2) {
firebase.firestore().collection('chatrooms').doc('private').collection(this.state.chatroomDetails.key).doc('messages').collection('messages')
.onSnapshot(function (querySnapshot) {
if (!querySnapshot.empty) {
querySnapshot.forEach(function (doc) {
console.log('the console');
console.log(doc.data());
messagesArray.push(doc.data())
})
}
})
this.setState({ messages: messagesArray })
}
}在listener()中，我可以看到来自另一个设备的新消息，但我似乎无法从这里将其设置为我的状态……救命啊！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-04 23:24:42
状态可能不会更新，因为您正在改变它。当这一行运行时：
messagesArray.push(doc.data())
this.setState({ messages: messagesArray })您正在向messages数组中添加一个已经处于该状态的项，然后将状态设置为相同的值，这将不会重新呈现您的组件。
您可以通过在每次接收到集合上的更新时将messages值设置为新数组来更正此问题。如下所示：
this.setState({ messages: [...messagesArray, doc.data()] })编辑：
我还注意到您的状态更新不在这里的快照监听器中：
.onSnapshot((querySnapshot) => {
if (!querySnapshot.empty) {
querySnapshot.forEach((doc) => {
console.log('the console');
console.log(doc.data());
messagesArray.push(doc.data())
})
}
})
this.setState({ messages: messagesArray })它应该看起来像这样：
.onSnapshot((querySnapshot) => {
if (!querySnapshot.empty) {
querySnapshot.forEach((doc) => {
this.setState({ messages: [...messagesArray, doc.data() })
})
}
})或者更好的方法是防止不必要的状态更新：
.onSnapshot((querySnapshot) => {
if (!querySnapshot.empty) {
const newMessages = querySnapshot.map((doc) => doc.data())
this.setState({ messages: [...messagesArray, ...newMessages })
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64688492
复制相关文章
相似问题
腾讯云开发者
