1

Estoy practicando con un proyecto de React con Firebase. Necesito traer los datos de un json alojado en la realtime database de Firebase.

Está estructurado de esta manera: introducir la descripción de la imagen aquí

En mi aplicación hay una sección donde se muestran todos los datos de "cupcakes" con esta petición GET: https://cupcakes-default-rtdb.firebaseio.com/cupcakes.json la cual me devuelve un array con los datos del json dentro. Recorro el array con un .map() y funciona sin problemas.

El problema empieza cuando, en cierta parte de la página, quiero mostrar sólo unos cuantos cupcakes. Para ello utilizo la misma petición pero con un filtro: https://cupcakes-default-rtdb.firebaseio.com/cupcakes.json?orderBy="id"&startAt=3&endAt=6 la cual me produce un error cuando intento recorrerla con .map() (error: cupcakes.map is not a function). Después de hacer unas pruebas me di cuenta que a diferencia de la petición sin filtro, esta no me devuelve los datos dentro de un array.

introducir la descripción de la imagen aquí

Este es el código que considero relevante de la aplicación (el código no es 100% mío, la mayor parte es una copia de un curso donde se realiza este proyecto).

Primero, un Hook propio que se encarga de hacer la peticion GET.

import { useEffect, useState } from "react"
import { get } from "axios"

const useFetch = (endpoint, filtro) => {
    const [ data, setData ] = useState()
    const [ error, setError ] = useState()

    useEffect(() =>{
        get(`${process.env.REACT_APP_URL_API}${endpoint}.json${filtro}`)
            .then(({ data }) => setData(data))
            .catch(err => setError(err))
    }, [endpoint, filtro])

    return [data, error];
}

export default useFetch

Luego el componente que crea el cupcake.

import useFetch from "../../hooks/useFetch"
import Cupcake from "../cards/Cupcake"


const Cupcakes = ({ peticion, filtro, title }) => {
    const [cupcakes] = useFetch(peticion, filtro)
    console.log('datacupcakes:',cupcakes)
    return(
        <div>
            {title && <h1 className="ms-4">Página de cupcakes</h1>}
            {
                cup ? (
                    <section className="cupcakes-container">
                    {
                        cup.map(({id, descripcion, imagen, sabor, color, precio, vendido, numero}) => (
                            <Cupcake
                                key={id}
                                numero={numero}
                                imagen={imagen}
                                descripcion={descripcion}
                                sabor={sabor}
                                color={color}
                                precio={precio}
                                vendido={vendido}
                            />
                        ))
                    }
                </section>
                ) : (<span>Cargando...</span>)
            }
        </div>
    )
}

export default Cupcakes

Y finalmente la sección donde quiero que se rendericen los cupcakes filtrados.

import Servicios from "../sections/Servicios"
import Cupcake from "./cupcake"
import { NavLink } from "react-router-dom"

const query = '?orderBy="id"&startAt=3&endAt=6'

const Home = () =>{
    return(
        <>
<div className="main-banner">
    <div className="main-banner__info">
      <h1 className="">Bienvenido</h1>
      <p className="">Página de cupcakes con React.</p>
      <div className="banner-btn">
      <NavLink className="btn btn-danger" to="/cupcakes" exact>Ver Cupcakes</NavLink>
      </div>
    </div>
  </div>
            <Cupcake peticion="cupcakes" filtro={query}/>
            <Servicios peticion="servicios" filtro="?"/>
        </>
    )
}

export default Home

En teoría, el objeto que recibo con "useFetch" ya debería venir dentro de un array, pero sigue llegando sólo como objeto.

Lo ultimo que intenté fue crear una variable con un array vacío y luego hacerle un push con lo que que me devuelve "useFetch", pero tanto el objeto como el array se vuelven undefined

¿Alguna idea de como puedo solucionar esto sin cambiar demasiado la idea base del código?

Agradezco cualquier ayuda.

0

1 respuesta 1

1

Parece que al aplicar el filtro, los resultados vienen en una estructura tipo hash table/dictionary con propiedades enumerables, que en Javascript se puede representar como un tipo Object:

Petición con filtro: {2:{...},3:{...},4:{...},5:{...}}

Por esta razón al tratar de iterar este tipo Object, con el método map propio del tipo Array, se obtiene:

error: cupcakes.map is not a function

Una forma de solucionarlo es transformar la estructura de data para que sea un array de objects cuando se aplique el filtro, esta transformación se puede lograr con Object.values.

Esta es una propuesta, si se usa el mismo useFetch para ambas peticiones (con filtro/sin filtro) se deberá agregar la lógica correspondiente:

const useFetch = (endpoint, filtro) => {
    const [ data, setData ] = useState()
    const [ error, setError ] = useState()

    useEffect(() =>{
        get(`${process.env.REACT_APP_URL_API}${endpoint}.json${filtro}`)
            .then(({ data }) => {
                     //aqui tal vez se necesite lógica para evaluar con o sin filtro
                     if(Array.isArray(data)){
                        setData(data);
                     } else {
                        const ObjectToArray = Object.values(data);
                        setData(ObjectToArray);
                     }
             }).catch(err => setError(err))
    }, [endpoint, filtro])

    return [data, error];
}

Espero que esta respuesta sea de ayuda.

Enlaces:

Property accessors / associative arrays

Object.values

isArray JS

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.