问React Native Firebase聊天应用程序-为新传入的消息添加侦听器
EN

Stack Overflow用户

提问于 2020-11-04 22:15:09

回答 1查看 397关注 0票数 2

我正在我的应用程序中创建一个利用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()中，我可以看到来自另一个设备的新消息，但我似乎无法从这里将其设置为我的状态……救命啊！

reactjs

firebase

react-native

chat

addeventlistener

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