如何在Firestore中對檔案集進行排序 -有解無憂

我有一個問題，在Firebase的第9版更新之后，我似乎不知道如何在一個集合中對檔案進行排序。

下面是我的代碼。我似乎不明白如何在onSnapshot中實作orderBy。誰能給我指點一下正確的方向。我翻閱了檔案，但沒有找到解決方案。

import React, { useState, useEffect } from "react"。
import SignOut from "./SignOut"/span>;
import { Grid, Typography, Avatar } from "@material-ui/core" 。
import db from "./firebase"。
import { onSnapshot, collection, orderBy, query, limit } from "firebase/firerestore"。
import SendMessage from "./SendMessage"/span>;

function ChatBox() {
  const [messages, setMessages] = useState([] )。

  useEffect(() => {
    onSnapshot(collection(db, " messages"), (snapshot) =>  {
      setMessages(snapshot.docs. map((doc) => doc.data（））。
    });
  }, []);
  return (
    <>/span>
      <Grid container> 
        < Grid item xs="12" style={{ textAlign:  "right" }}>
          <SignOut></SignOut> 
        </Grid>/span>
        {messages.map(({ id, text, photoURL }) => (
          < Grid item xs="12"  key={id} style={{ marginBottom:  "1rem" }}>
            < Avatar alt="" src={photoURL} /> 
            <Typography>{text}</Typography> 
          </Grid>/span>
        ))}
      </Grid>))}</Grid>)
      <Grid container> 
        <SendMessage></SendMessage> 
      </Grid>/span>
    </>
  );
}

export default ChatBox;

uj5u.com熱心網友回復：

好吧，我找到了一個解決方案：

當你使用order by時，如果你想按檔案排序的欄位在檔案中不存在，order by將不會 "存盤 "和排序該檔案。接下來，在我的聊天程式中，我用Firebase提供的Timestamp建構式創建了一個欄位。這使得我可以按照createdAt的順序來排列檔案。

我的ChatBox檔案的代碼。 Chatbox.js

span class="hljs-keyword">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(newDate())。
    });

希望這有意義。

uj5u.com熱心網友回復：

在JS API v9中，我們必須以一種功能性的方式來執行一切。在你附加一個監聽器之前，要對集合進行排序，你需要執行一個查詢。查詢可以接受一個參考，對結果進行排序，并將結果傳遞給呼叫者。

換句話說，你的代碼應該是這樣的：

span class="hljs-keyword">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改為你想用來排序結果的任何欄位的參考。我們在這里要做的是：

獲取對一個集合的參考
為結果附加一個監聽器

uj5u.com熱心網友回復：

你好，你可以試試這個：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333304.html

標籤：

上一篇：如何使滑塊發揮其應有的功能？

下一篇：如何在useState鉤子中更新物件陣列中的值