为什么来自 firestore 的聊天消息显示在 "groups" 中？

Question

我正在尝试使用 react-native-gifted-chat 在我的应用程序中构建聊天室。

不幸的是，聊天出现在“组”中，而不是按顺序出现。例如，

我发消息
其他人发送消息
我再发一条消息
我发送的消息分组在一起，有时显示在其他消息的上方，有时在下方

这是问题的图片：

注意一些较新的消息是如何在一些较旧的消息之上的，并按发送它的用户分组！

这是我将消息写入数据库的方式：

onSend = async(message) => {
        this.setState({isTyping: true})
        await Firebase.firestore().collection("chat")
        .add({
            user: {
                _id: this.state.currentUser.id,
                name: this.state.currentUser.name,
                avatar: this.state.currentUser.avatar,
            },
            
        })
        .then(ref => this.setState({messageID: ref.id}))

        await Firebase.firestore().collection("chat")
        .doc(this.state.messageID)
        .set({
            _id: this.state.messageID,
            text: message[0].text,
            createdAt: dayjs(Moment(message[0].createdAt).format('LLL')).locale('en-ca').format()
        }, { merge: true })

    }

    render() { 
        return (
            <View style={{backgroundColor: '#000000', flex: 1}}>
                <GiftedChat
                    showUserAvatar={true}
                    isTyping={this.state.isTyping}
                    renderUsernameOnMessage={true}
                    messages={this.state.messages}
                    onSend={message => this.onSend(message)}
                    scrollToBottom
                    locale = { dayjs.locale('en-ca') }
                    showAvatarForEveryMessage = {true}
                    dateFormat = 'll'
                    timeFormat = 'LT'
                    onPressAvatar={user => this.getProfile(user)}
                />
            </View>
            
        )
        
    }
}

我如何阅读消息：

getCurrentMessages = async() => {

        await Firebase.firestore().collection("chat")
        .orderBy("createdAt", "desc")
        .limit(50)
        .onSnapshot(querySnapshot => {
            const messages = []

            querySnapshot.forEach((res) => {
                const { 
                    _id,
                    user,
                    text,
                    createdAt,
                    } = res.data();
    
                    messages.push({
                        key: res._id,
                        _id,
                        user,
                        text,
                        createdAt,
                    });
            })

            this.setState({
                messages,
                isLoading: false, 
                isTyping: false
            });
        })
    }

在 firestore 中，时间是这样写入数据库的：

知道为什么邮件会组合在一起吗？

从按创建日期排序的 firestore 中提取消息似乎是一个简单的例子，但这看起来并不正常。

我在群聊里发消息也出现如下错误，请问是不是跟这个有关系？

react-native-gifted-chat] GiftedChat: `user` is missing for message {"_id":"lxYBMTV0sD7kaLQOsQLp","text":"Test 5","createdAt":"2021-01-25T22:05:00-08:00"}

[有的是美国东海岸发的，有的是美国西海岸发的。请问这和分组有关系吗？]

Answer 1

根据图像显示，createdAt 字段不是时间戳字段，它是 String。

如前所述添加时间戳字段here

createdAt: new Date();

or specific date-time

createdAt: firestore.Timestamp.fromDate(new Date());

or else for server time

createdAt: firestore.FieldValue.serverTimestamp()

如果您能够更正该字段，您的 orderBy 查询将以正确的顺序检索数据。

现在排序发生在 String 字段上，因此它不会按预期工作！

为什么来自 firestore 的聊天消息显示在 "groups" 中？

Why are chat messages from firestore showing up in "groups"?

javascript

react-native

google-cloud-firestore

react-native-gifted-chat