Estoy tratando de consultar mi base de datos de firestore usando getDocs() y usando un estado para almacenar los productos dentro de la colección "category1". Esto es para poder renderizar todos los productos dentro de la colección "category1" usando React.

Este es mi archivo Category.jsx:

 import React, { useState, useEffect } from "react"; import Product from "./Product"; import { getDocs, collection } from "firebase/firestore"; import db from "../firebase.config"; function Category(props) { const [products, setProducts] = useState([]); const fetchProducts = async () => { const querySnapshot = await getDocs(collection(db, props.id)); querySnapshot.docs.forEach((doc) => { setProducts([...products, { ...doc.data(), id: doc.id }]); }); }; useEffect(() => { fetchProducts(); }, []); return ( <div> <h1>{props.name}</h1> {products && products.map((product) => { const { productName, image, price, description } = product; return ( <Product key={product.id} productName={productName} image={image} price={price} description={description} /> ); })} </div> ); } export default Category;

Mi base de datos de Firestore contiene estos dos documentos:

 { description: "this is an example product", id: "6B5RqpuTMwg4hRhmOSwZ", image: "imagelink", price: 199, productName: "Product 1" }, { description: "this is another product", id: "a4VUpJMTvwh9tDsFyaxy", image: "imagelink", price: 299, productName: "Product 2" }

El resultado es que solo aparece el Producto 2. Cuando hago console.log(products) puedo ver que el producto 1 está dentro del estado de productos y luego es reemplazado por el producto 2.

Gracias