React - 订购来自 FireBase 的数据

Question

以下组件连接到名为 FlashCards 的 FireBase 集合，使用 get() 函数获取数据，然后使用 cards 将它们保存在setCards.

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';

const List = () => {
  const [cards, setCards] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await db
        .collection('FlashCards')
        .get()
      setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    fetchData();
  }, []);

  return (
    <>
      <ul>
        {cards.map((card) => (
          <li key={card.id}>
            {card.customId}
            {card.originalText}
          </li>
        ))}
      </ul>
    </>
  );
};

export default List;

FlashCards 集合中的每个文档都有一个名为 customId 的字段。我想通过那个 customId 来订购我的数据。

为此，我尝试了以下方法：

useEffect(() => {
    const fetchData = async () => {
      const data = await db
        .collection('FlashCards')
        .get()
        .orderBy('customId');
      setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    fetchData();
  }, []);

但是当我这样做时，出现以下错误：

orderBy 不是函数

如何通过 customId 订购我的数据？

Answer 1

你好尝试切换“orderBy”和“get”

React - 订购来自 FireBase 的数据

React - Ordering data coming from FireBase

hook