React项目中如何对Firestore返回的查询结果按指定字段排序

核心修改步骤 #

• 导入Firestore提供的query、orderBy两个方法
• 基于原集合引用构建带排序规则的查询对象
• 用新构建的查询对象替代原集合引用传入getDocs方法

完整修改后代码 #

import { useState, useEffect } from 'react';
import './App.css';
import { db } from './firebase-config';
import {
  collection,
  getDocs,
  addDoc,
  doc,
  query,
  orderBy
} 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 () => {
      // 构建排序查询，orderBy第二个参数传desc为降序（迟到次数多的在前），不传默认升序
      const sortedQuery = query(usersCollectionRef, orderBy('tardy', 'desc'));
      const data = await getDocs(sortedQuery);
      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 key={user.id}>
            <h2>Name: {user.name}</h2>
            <h2>Tardies: {user.tardy}</h2>
          </div>
        );
      })}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Bryce