如何在firebase或react查询中执行分页

Question

我正在尝试从我的 firebase firestore 对我的产品进行分页，但产品没有返回 null 或未定义

这是我的状态背景，我似乎没有弄对

  const [items, setItems] = useState([]);

  

  const initialState = {
    showCart: false,
    products: items,
    cartItems: c,
  };
  const { q } = useQuery({
    queryKey: ["products"],
    queryFn: async () => {
      const first = query(
        collection(db, "products"),
        orderBy("title"),
        limit(4)
      );
      const data = await getDocs(first);
      data.docs.forEach((doc) => {
        let key = doc.id;
        let item = doc.data();
        // items.push({ key, item });
      });
      setItems(data.docs);
      console.log(data.docs.lenght);
    },
  
// output in console: 0

// expected File;[{...}] array object
});

Answer 1

我已经修复了集合引用错误，因此它没有找到 firestore 引用并返回

null

或

undefined

这是修复方法

  useQuery({
    queryKey: ["products"],
    queryFn: async () => {
      const first = query(
    collection(db, "products"),
    //collectio reference folder is suppose to be 
    'Products' not 'products'
        orderBy("title"),
        limit(4)
      );
      const data = await getDocs(first);
      data.docs.forEach((doc) => {
        let key = doc.id;
        let item = doc.data();
        items.push({ key, item });
      });
      setItems(data.docs);
    },
  });
}