does not execute useEffect() error TypeError: Cannot read properties of undefined (reading 'toS-CodePudding

hello friends I have a problem in an application in react JS that is driving me crazy and I don't know how to solve it, I am making a call with axios to obtain information which I have already tried with postman and the backend works perfectly the issue is that I don't know this executing the useEffect() where I am making that call to fill a useState and pass that object by props to a child component. below sent code and error . thank you very much for any help you can give me I'm starting with react

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/'

    //Data
    const getQuejaById = async () => {
        const res = await axios.get(endpoint   id)
        .then(function (response) {
            setDetalle(JSON.stringify(response.data))
         }).catch(function (error) {
            console.log(error.response);
        });
        
    }
    //Triggered
    useEffect(() => {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 ///////////////////////////////

InfoGeneralQueja.js:32 Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
    at InfoGeneralQueja (InfoGeneralQueja.js:32:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
InfoGeneralQueja @ InfoGeneralQueja.js:32
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:74
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <InfoGeneralQueja> component:

    at InfoGeneralQueja (http://localhost:3000/static/js/bundle.js:2509:24)
    at div
    at div
    at QuejaDetalle (http://localhost:3000/static/js/bundle.js:4061:66)
    at Outlet (http://localhost:3000/static/js/bundle.js:143525:26)
    at div
    at div
    at div
    at AppLayout (http://localhost:3000/static/js/bundle.js:1132:66)
    at Routes (http://localhost:3000/static/js/bundle.js:143624:24)
    at Router (http://localhost:3000/static/js/bundle.js:143549:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:142986:23)
    at Provider (http://localhost:3000/static/js/bundle.js:140426:20)
    at div
    at Root (http://localhost:3000/static/js/bundle.js:15107:51)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:74
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
InfoGeneralQueja.js:32 Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
    at InfoGeneralQueja (InfoGeneralQueja.js:32:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

CodePudding user response：

Your error's stack shows that you're calling .toString() in <InfoGeneralQueja /> on an undefined value. You need to properly handle the detalle prop before it's populated by the effect.

Do not use await and .then. These do the same thing in purpose. It might cause problems like this one.

    const getQuejaById = async () => {
      try {
        const res = await axios.get(endpoint   id)
        setDetalle(JSON.stringify(res.data)) 
      } catch (e) {
        console.error(e)
      }       
    }

Also, you need to ensure that you're getting the data you want from the API.

CodePudding user response：

Thank you very much for your answers, I was able to solve it by conditioning the rendering since it was actually rendering before making the API call

{detalle.length>0 && <InfoGeneralQueja detalle={detalle} />}
            {detalle.length>0 && <InfoCalidadQueja detalle={detalle} user={user} />}
            {detalle.length>0 &&  <InfoDirectorQueja detalle={detalle} user={user} />}