如何在Firestore中排序集合中的文档

Question

我有一个问题，在Firebase版本9更新后，我似乎不知道如何在集合中排序文档。

这是我的代码。我似乎不明白如何在onSnapshot中实现order。有人能给我指个方向吗?我已经看了文档，但找不到解决方案。

import React, { useState, useEffect } from "react";
import SignOut from "./SignOut";
import { Grid, Typography, Avatar } from "@material-ui/core";
import db from "../firebase";
import { onSnapshot, collection, orderBy, query, limit } from "firebase/firestore";
import SendMessage from "./SendMessage";
function ChatBox() {
const [messages, setMessages] = useState([]);
useEffect(() => {
onSnapshot(collection(db, "messages"), (snapshot) => {
setMessages(snapshot.docs.map((doc) => doc.data()));
});
}, []);
return (
<>
<Grid container>
<Grid item xs="12" style={{ textAlign: "right" }}>
<SignOut></SignOut>
</Grid>
{messages.map(({ id, text, photoURL }) => (
<Grid item xs="12" key={id} style={{ marginBottom: "1rem" }}>
<Avatar alt="" src={photoURL} />
<Typography>{text}</Typography>
</Grid>
))}
</Grid>
<Grid container>
<SendMessage></SendMessage>
</Grid>
</>
);
}
export default ChatBox;

Answer 1

好了，我找到了一个解决方案:

当您使用order by时，如果您试图对文档进行排序的字段在文档中不存在，则order by将不"存储";然后订购那份文件。接下来，在我的聊天应用程序中，我用Firebase提供的Timestamp构造函数创建了一个字段。这使我可以按createdAt订单订购文件。

我的ChatBox文件代码:Chatbox.js

import { collection, query, onSnapshot, orderBy } from "firebase/firestore";
//OTHER CODE
useEffect(() => {
onSnapshot(query(collection(db, "messages"), orderBy("createdAt")), (snapshot) => {
setMessages(snapshot.docs.map((doc) => doc.data()));
});
}, []);

SendMessage.js

import { collection, addDoc, Timestamp } from "firebase/firestore";
//OTHER CODE
const [userMessage, setUserMessage] = useState("");
async function sendUserMessage(e) {
const auth = getAuth();
e.preventDefault();
const { uid, photoURL } = auth.currentUser;
await addDoc(collection(db, "messages"), {
text: userMessage,
photoURL,
uid,
createdAt: Timestamp.fromDate(new Date()),
});
}

希望这有意义。

Answer 2

在JS API v9中，我们必须以功能方式执行所有操作。要在附加侦听器之前对集合排序，需要执行查询。查询可以接受引用，排序结果并将结果传递给调用者。

也就是说，你的代码应该是这样的:

import { onSnapshot, collection, orderBy, query, limit } from "firebase/firestore";
//OTHER CODE
useEffect(() => {
onSnapshot(query(collection(db, "messages"), orderBy("YOUR_FIELD")), (snapshot) => {
setMessages(snapshot.docs.map((doc) => doc.data()));
});
}, []);

将YOUR_FIELD的引用更改为您想要用于排序结果的任何字段。我们在这里做的是:

• 获取对集合的引用
• 请求firestore对该集合执行查询，并按字段
对结果排序。
• 将监听器附加到结果

Answer 3

嗨，你可以试试这个吗:

useEffect(() => {
onSnapshot(query(collection(db, "messages").orderBy('createdAt').startAfter(today)), 
(snapshot) => {
setMessages(snapshot.docs.map((doc) => doc.data()));
}); 
}, []);