无法使用 React Native 和 Gifted Chats 将数据写入 Firestore

Question

我正在尝试在我的 React Native 应用程序中实现聊天功能。

我面临的问题是，如果我发送消息，它不会保存在 Firestore 数据库中。但如果我删除 useLayoutEffect 函数，消息将保存在 Firestore 中。 我从这个Page得到了代码：

这是我的代码：

import React, {useCallback, useLayoutEffect, useState} from 'react';
import {addDoc, collection, query, orderBy, onSnapshot} from 'firebase/firestore';
import {db} from '../../../firebase';
import {GiftedChat} from 'react-native-gifted-chat';

export const EventChatScreen = () => {
    const [messages, setMessages] = useState([])

useLayoutEffect(() => {
    const collectionRef = collection(db, 'chats');
    const q = query(collectionRef, orderBy('createdAt', 'desc'));

    return onSnapshot(q, QuerySnapshot =>
    {
        setMessages(
            QuerySnapshot.docs.map(doc => ({ // these key:value pairs are in a required format for GiftedChat
                _id:       doc.data()._id,
                createdAt: doc.data().createdAt.toDate(),
                text:      doc.data().text,
                user:      doc.data().user
            }))
        );
    });
}, []);

const onSend = useCallback((messages = []) => {
    setMessages(previousMessages =>
        GiftedChat.append(previousMessages, messages)
    );
    const { _id, createdAt, text, user } = messages[0];
    addDoc(collection(db, 'chats'), {
        _id,
        createdAt,
        text,
        user
    });
}, []);

return (

    <GiftedChat
        messages={messages}
        showAvatarForEveryMessage={true}
        onSend={messages => onSend(messages)}
        user={{
            _id: 1,
            avatar: 'https://i.pravatar.cc/300'
        }}
    />
    );
    }

export default EventChatScreen

正如我之前提到的。一旦我删除 useLayoutEffect ，它就会将数据保存到 Firebase 。 我还尝试获取添加文档的返回值。但是一旦添加了useLayoutEffect函数，它就不会返回Value。

编辑：现在当我处于调试模式时它可以工作。

Answer 1

此问题应使用最新版本的 Firebase SDK 进行修复。

您所描述的是旧版本的常见问题。