1

Hola amigos tengo un problema con una app en React JS que estoy haciendo que me esta volviendo loco, el tema es que estoy haciendo una llamada a una api con axios y utilizo useEffect() para setear la respuesta en un useState y así pasársela a un componente por props sin embargo me da error y cuando se abre el componente indica que la data esta vacía, valide la respuesta de la api y todo perfecto de hecho hice pruebas con postman y todo bien, siento que el componente se esta renderizando antes de ejecutar el useEffect() y lo que mas me causa confusión es que así coloque un console.log dentro del useEffect() y antes de mi función este tampoco me lo muestra. les adjunto código y error , mil gracias por cualquier ayuda que me puedan dar.

import React, { Fragment, useState, useEffect } from 'react';
import Breadcrumb from '../../common/breadcrumb';

import InfoGeneralQueja from './components/InfoGeneralQueja'
import InfoCalidadQueja from './components/InfoCalidadQueja'
import InfoDirectorQueja from './components/InfoDirectorQueja'

import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";


const QuejaDetalle = () => {
    const [detalle, setDetalle] = useState([])
    //id params
    const { id } = useParams()
    console.log("ID: ", id)

    //User
    const user = JSON.parse(localStorage.getItem('user'))

    //end point
    const endpoint = 'http://localhost:5000/detalle/'

        const getQuejaById = async () => {
            try {
              const res = await axios.get(endpoint + id)
              setDetalle(JSON.stringify(res.data)) 
            } catch (e) {
              console.error(e)
            }       
          }
  
    //Triggered
    useEffect(() => {
        console.log('test')
        getQuejaById()
    },[])

    
   



    return (
        <Fragment>
            <Breadcrumb title={`Detalles Evento`} parent="Quejas" />
            <div className="container-fluid"></div>
            <div className="row">
                <InfoGeneralQueja quejaData={detalle} />
                <InfoCalidadQueja quejaData={detalle} user={user} />
                <InfoDirectorQueja quejaData={detalle} user={user} />
            </div >
        </Fragment >
    )
}

export default QuejaDetalle

ERROR//////////////////////

introducir la descripción de la imagen aquí

1
  • el componente se renderizara antes que se haga la peticion y por lo tanto no tiene los datos para renderizarse. debes poner un condicionador en el return que mientras detalle sea nulo no renderice el componente {detalle && ....} Commented el 25 mar. 2022 a las 2:35

1 respuesta 1

1

Hola te sugiero que utilices detalle.length > 0 y "&&" para que si la condición de detalle.length se cumple, recien renderice los componentes que tienen tu variable detalle en el prop de quejaData, ahorita el problema es que "detalle" esta vació al momento de renderizar.

         <Fragment>
            <Breadcrumb title={`Detalles Evento`} parent="Quejas" />
            <div className="container-fluid"></div>
            <div className="row">
                {detalle.length>0 && <InfoGeneralQueja quejaData={detalle} />}
                {detalle.length>0 && <InfoCalidadQueja quejaData={detalle} user={user} />}
               {detalle.length>0 &&  <InfoDirectorQueja quejaData={detalle} user={user} />}
            </div>
        </Fragment>

No se qué contiene "detalle" pero dependiendo del tipo de dato tendrás que hacer algo así:

si recibe un string o un array:

detalle.length > 0 && <InfoGeneralQueja...

si recibe un objeto:

Object.keys(detalle).length > 0 <InfoGeneralQueja...
2
  • Muchas gracias Rene me funciono la solución , efectivamente se estaba renderizando antes de llamar a la api .. saludos. Commented el 25 mar. 2022 a las 3:33
  • Me alegra mucho, saludos!
    – Rene Polo
    Commented el 25 mar. 2022 a las 3:39

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.