为什么来自 Firestore 的聊天消息会显示在“群组”中？

Question

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

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

1. 我发消息
2. 别人发消息
3. 我再发一条消息
4. 我发送的消息组合在一起，有时出现在其他消息上方，有时出现在下方

这是问题的图片：

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

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

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 字段上，所以它不会按预期工作！