React - данные для заказа, поступающие из FireBase

Question

Следующий компонент подключается к коллекции FireBase, называемой FlashCards, получает данные с помощью функции get() и затем сохраняет их внутри карт с помощью 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»