1

Estoy intentando hacer un filtro de productos. Y los tomo de Firebase. Cuando renderizo la página por primera vez no funciona. Luego, si cambio algo en el Visual Code y guardo, ahí si se guardan los datos y se ven en la pagina. ¿Por que sucede eso? ¿Cómo podría solucionarlo?

Creo que ni siquiera se guardan los datos en el State ya que si hago un console.log de limpieza me muestra un array vacio.

import { useEffect, useState } from "react"
import { getFirestore } from "../firebase"
import Item from "../components/Productos/Item"

function Filtrar(){
  const [producto, setProducto] = useState([])
  const [limpieza, setLimpieza] = useState([])
  const [categ, setCateg] = useState()

useEffect(()=> {
        setCateg("limpieza")
        const db = getFirestore()
        const coleccion = db.collection("productos")
        coleccion.get()
        .then((res)=> setProducto(res.docs.map((res)=> ({...res.data(), id:res.id}))))
        .then(()=> setLimpieza(producto.filter(element=> element.categoria === "limpieza")))
    },[])

return (<>
            <div className="contenedor-list">
                {limpieza.map((producto) => {
                return <Item key={producto.id} producto={producto} />})}
            </div>
        </>)
    }

export default Filtrar

pd: es la primera vez que uso esto, no se si con el código que subí es necesario o falta algo más para que me puedan ayudar. Desde ya, muchas gracias.

1 respuesta 1

0

Me parece que las funciones set para limpieza y productos no están sincronizadas con el componente Filtrar.

Cuando se hace esto, en el segundo then:

coleccion.get()
        .then((res)=> setProducto(res.docs.map((res)=> ({...res.data(), id:res.id}))))
        .then(()=> setLimpieza(producto.filter(element=> element.categoria === "limpieza")))

El estado producto tiene su valor de estado en array vacío aún, pues no se ha re-renderizado el componente


Asignaciones Asincrónicas con useEffect

Sugiero usar 2 useEffect, el primero para productos:

useEffect(()=> {
        const db = getFirestore();
        const coleccion = db.collection("productos");
        coleccion.get()
        .then((res)=> setProducto(res.docs.map((res)=> ({...res.data(), id:res.id}))));
},[])

El segundo para limpieza:

useEffect(()=> {
    let stateCopy = producto.filter(element=> element.categoria === "limpieza");
    setLimpieza(stateCopy);
},[producto.length])

Secuencia:

  • El primer useEffect hace el set de productos y re-renderiza el componente Filtrar.
  • El segundo useEffect, ya con el nuevo valor de productos disponible, hace el set de limpieza y re-renderiza el componente Filtrar.
  • Nótese que se especifica en el array de dependencias, que se dispare el segundo useEffect si el valor del estado productos ya cambió.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.