如何從 Firestore 訂購我的數據庫結果？

Question

我正在制作一個使用 Firestore 跟蹤用戶遲到數量的應用程序，但我不知道如何按遲到數對結果列表進行排序。

我已經嘗試使用 Firebase 文檔中的orderBy() function ，但是我還不能用我現有的代碼正確實現它。

import { useState, useEffect } from 'react';
import './App.css';
import { db } from './firebase-config';
import {
  collection,
  getDocs,
  addDoc,
  doc,
} from 'firebase/firestore';

export default function App() {
  const [newName, setNewName] = useState('');
  const [newTardy, setNewTardy] = useState(0);

  const [users, setUsers] = useState([]);
  const usersCollectionRef = collection(db, 'users');

  const createUser = async () => {
    await addDoc(usersCollectionRef, {
      name: newName,
      tardy: Number(newTardy),
    }).then(() => {
      alert('User Created');
    });
  };

  useEffect(() => {
    const getUsers = async () => {
      const data = await getDocs(usersCollectionRef);
      setUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    getUsers();
  }, []);

  return (
    <div className="App">
      <h1>Tardy List</h1>
      <input
        placeholder="Name..."
        onChange={(event) => {
          setNewName(event.target.value);
        }}
      />
      <input
        type="number"
        placeholder="Number of Tardies..."
        onChange={(event) => {
          setNewTardy(event.target.value);
        }}
      />
      <br />
      <button onClick={createUser}> Create User</button>

      {users.map((user) => {
        return (
          <div>
            <h2>Name: {user.name}</h2>
            <h2>Tardies: {user.tardy}</h2>
          </div>
        );
      })}
    </div>
  );
}

Answer 1

通過閱讀有關ordering data的文檔，這樣的事情應該可以解決問題：

const data = await getDocs(query(usersCollectionRef, orderBy("tardy")));
setUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));