1

Soy nuevo en react, así que es probable que esta pregunta no sea tan complicada.

Tengo un hook(UseFetch) que realiza peticiones fetch y retorna errores o alguna animacion de loading mientras se ejecuta

import {useState, useEffect} from 'react'

const useFetch = url => {
    const [data, setData] = useState([])
    const [error, setError] = useState(null)
    const [loading, setLoading] = useState(true)

    useEffect( () => {    
        const fetchResource = async () => {
            try {
                let res = await fetch(url);
                let data = await res.json();

                setLoading(false)
                setData(data)
                //console.log(data)                        
            } catch (error) {
                setLoading(false)
                setError(error)
            }
        }
        fetchResource()
    }, [url])

    return { data, error, loading }
}

export default useFetch

Este hook lo utilizo en diferentes componentes y funciona bien, pero actualmente tengo un componente llamado Inicio en el cual necesito que realice dos peticiones dentro del mismo pero no encuentro la manera. Lo intente de la siguiente forma pero me marca un error de sintaxis en el if (loadingCarrusel):

Syntax error: Unexpected token

const Inicio = () => {
    const {data, error, loading} = useFetch('https://jsonplaceholder.typicode.com/photos/?_limit=5')
    const {dataCarrusel, errorCarrusel, loadingCarrusel} = useFetch('https://jsonplaceholder.typicode.com/photos/?_limit=5')

    if (loading)
        return <Loading />
    if (error)
        return <FatalError msg="Hubo un error al realizar la solicitud" />

    return <div className="row pb-3">
        <div className="col-3">
            <Fotos fotos={data} />
        </div>
        <div className="col-6">                
            { if (loadingCarrusel)
                return <Loading />
            if (errorCarrusel)
                return <FatalError msg="Hubo un error al realizar la solicitud" />
            }
            <Carrusel fotos={dataCarrusel} />
        </div>
    </div>
}

export default Inicio

Desde que hago el return dentro de otro return sé que está mal lo que hago pero no se como solucionar esto. La única solución que encuentro es crear un nuevo componente desde donde llamar al otro fetch pero quisiera saber si se puede dentro del mismo.

UPDATE

Ya estuve investigando y tiene que ver con algo llamado renderizado condicional pero aún así la segunda llamada me retorna undefined al hacer console.log(dataCarrusel);. Coloco el código actualizado

const Inicio = () => {
    const {data, error, loading} = useFetch('https://jsonplaceholder.typicode.com/photos/?_limit=5')
    const {dataCarrusel, errorCarrusel, loadingCarrusel} = useFetch('https://jsonplaceholder.typicode.com/photos/?_limit=10')
    console.log(dataCarrusel);

    if (loading)
        return <Loading />
    if (error)
        return <FatalError msg="Hubo un error al realizar la solicitud" />

    return <div className="row pb-3">
        <div className="col-3">
            <Fotos fotos={data} />
        </div>
        <div className="col-6">
            {
            loadingCarrusel &&
                <Loading /> 
            }
            {
            errorCarrusel &&
                <FatalError msg="Hubo un error al realizar la solicitud" />
            }
            { dataCarrusel &&
                <Carrusel fotos={dataCarrusel} />
            }
        </div>
        
    </div>
}

export default Inicio
8
  • 1
    Podrías agregar el error que recibes, Syntax error: Unexpected token no hace tanta referencia a el error que estas recibiendo
    – Enzo
    el 16 jun. 2021 a las 23:57
  • @Enzo es justo el error que aparece y señala la linea if (loadingCarrusel):. Solo indica cual numero de linea es con exactitud pero no son más datos importantes
    – Rene Limon
    el 17 jun. 2021 a las 0:04
  • 2
    @Desarrollos-Web-Urquiza si se omiten los {} con una simple identacion puede funcionar de igual manera el condicional, por otro lado, @Rene en tu hook estas retornando un objeto con tres propiedades, el primer hook va a funcionar por que obiamente estas destructurando las propiedas correctas, el segundo hook no va a funcionar por que estas extrayendo propiedades que en tu hook no exite, para que puedas obtener los datos que estas pidiendo puedes hacer uso de la palabra clave as, ejemplo const {data as dataCarrusel, error as errorCarrusel , loading as loadingCarrusel} = useFetch(MyUrl)
    – Enzo
    el 17 jun. 2021 a las 4:20
  • 1
    Esto debería lidiar con tu código, de igual manera si as no es de gran ayuda, puedes nombrar a las propiedades de la siguiente manera {data: dataCarrusel, error: errorCarrusel , loading: loadingCarrusel}
    – Enzo
    el 17 jun. 2021 a las 4:23
  • 1
    @Enzo tienes razón, no recordaba la destructuracion por no estar familiarizado del todo con ecmascript, ya funciona. Una ultima consulta, sabes si esto de llamar varias veces el mismo hook es buena practica o es algo inusual?? Gracias por la ayuda
    – Rene Limon
    el 17 jun. 2021 a las 4:58

1 respuesta 1

0

Quiero agradecer a Enzo por la ayuda brindada para resolver este problema, el error era que estaba olvidando que las variables del segundo hook se estaban asignado por medio de destructuración y por lo tanto había un error. La solución fue modificar la linea:

const {dataCarrusel, errorCarrusel, loadingCarrusel} = useFetch('https://jsonplaceholder.typicode.com/photos/?_limit=10')

por

const {data as dataCarrusel, error as errorCarrusel, loading as loadingCarrusel} = useFetch('https://jsonplaceholder.typicode.com/photos/?_limit=10')

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.