时间戳

首页 > 解决方案 > 从 Cloud Firestore 加载特定数量

javascript - 从 Cloud Firestore 加载特定数量

问题描述

我正在开发一个在 Cloud FireStore 中保存消息的聊天应用程序。我的问题是应用程序在打开聊天室时会加载所有消息。

我想要的是它只加载 50 条最新消息，并允许在 FlatList 上向上滚动时加载其他聊天。我正在使用 React Native 进行开发。

const [message, setMessage] = useState([]);

useEffect(() => {
        const subscriber = firestore()
            .collection('message')
            .doc(props.chat.key)
            .collection('messages')
            .orderBy("msgDate", "desc")
            .onSnapshot(querySnapshot => {
                const tempMessage = [];
                querySnapshot.forEach(documentSnapshot => {
                    tempMessage.push({
                        ...documentSnapshot.data(),
                        key: documentSnapshot.id,
                    });
                });

                setMessage(tempMessage);
            });

        // Unsubscribe from events when no longer in use
        return () => subscriber();
    }, []);


<FlatList
            inverted
            data={message}
            renderItem={({ item }) => (
                <MessageItem msgItem={item} />
            )}
        />

编辑：发现我可以使用 .Limit(50) 来仅加载 50 个文档。滚动时仍在刷新。

标签： javascriptfirebasereact-nativegoogle-cloud-firestore

解决方案

您正在寻找限制您的数据。这是有关订购和限制 Firestore 数据的Firestore 文档。

您可以在查询中添加条件以仅加载最后 20-30 条消息。orderBy 在这里也很有用，因为您想获取最新消息。您可以在消息的创建时间 orderBy 以获取最新消息。

推荐阅读