0

Hola gente como andan? Estoy iniciandome en React, estoy realizando un e-commerce en react y tengo un problema con el listado de productos, tengo los productos desde firebase y que los filtros con una funcion con un condicional, dandome los todos los items que tiene la misma categoria utilizando useParams. Pero el problema que tengo es que no estoy pudiendo hacer que, si en la url escribo cualquire cosa (que no sea una categoria) me redireccione al 404. Es decir que si pongo http://localhost:3000/cervezas me renderiza todos los items que tiene la categoria cervezas, pero si pongo http://localhost:3000/asdsaasdsad quiero que me redireccione al 404, y no estoy pudiendo realizarlo. Desde ya gracias. Les dejo el código:

    const { category } = useParams();
    const [products, setProducts] = useState([])
    const [loading, setLoading] = useState(true)
    const navigate = useNavigate()

    const getProducts = async () => {

        const itemCollection = collection(db, "bebidas")
        const productsSnapshot = await getDocs(itemCollection)
        const itemList = productsSnapshot.docs.map((item) => {
            const product = item.data()
            product.id = item.id

            return product
        })
        return itemList

    }

    useEffect(() => {
        setLoading(true)
        setProducts([])
        return getProducts().then((productos) => {
            setLoading(false)
            filterProductByCategory(productos, category)

        })

    }, [category])

    const filterProductByCategory = (array, categoria) => {
        array.map((producto) => {
            if (categoria === producto.categoria) {
                setProducts(products => [...products, producto])
            }
        })
    }

    return (
        <>
            <h1>{category.toUpperCase()}</h1>
            <div className="boxItem">
                {
                    !loading ? (
                        products.map((producto) => {
                            const { id, nombre, precio, tamaño, imagen, stock, categoria } = producto;
                            return (
                                <Link to={`./${id}`}>
                                    <div key={id} className="item" >
                                        <Item
                                            nombre={nombre}
                                            precio={precio}
                                            tamaño={tamaño}
                                            img={imagen}
                                            stockItem={stock}
                                        />

                                    </div>
                                </Link>
                            )
                        })
                    ) : (
                        <Box sx={{ display: 'flex' }}>
                            <CircularProgress />
                        </Box>
                    )
                }
            </div>
        </>
    )
}

1 respuesta 1

0

tienes varias opciones, por como tienes tu código, podrias intentar lo siguiente:

  • en tu función filterProductByCategory puedes validar los productos por la categoria, si tu arreglo es vacío, lo redireccionas a tu página 404, que debe estar creada previamente, lo podrias mandar al home igual, es algo que se hace generalmente cuando la ruta no es válida, ahí queda a criterio tuyo.

const filterProductByCategory = (array: any[], categoria: string) => {
    const products = array.filter(product => product.categoria === categoria);

    product.length > 0 && setProducts(products) ? history.push("/404")

  };

Otro punto en consideración, el map se usa para crear un nuevo arreglo, acá lo estás usando para filtrar, y en cada iteración que cumpla tu condición estás actualizando el estado products, es poco eficiente y mala práctica, para eso ocupa el filter, de hecho el nombre de tu función es filter xd,

Saludos!

1
  • Muchas gracias! me funciono a la perfección, estaba errado al hacer el map, cuando en realidad es como decis vos, un filter. Muchas gracias! el 6 may. 2022 a las 14:29

Tu Respuesta

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

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