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

Question

你好朋友，我在 React JS 的应用程序中遇到问题，这让我发疯，我不知道如何解决它，我正在与 axios 通话以获取我已经与邮递员尝试过的信息并且后端工作完美问题是我不知道这个执行 useEffect() 我在哪里调用填充 useState 并将该对象通过道具传递给子组件。下面发送代码和错误。非常感谢你能给我的任何帮助我从反应开始

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 (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 @ 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 @ 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 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

Answer 1

您的错误堆栈显示您在 <InfoGeneralQueja /> 中调用 .toString() 未定义的值。在效果填充之前，您需要正确处理 detalle 道具。

不要使用 await 和 .then。这些目的是做同样的事情。它可能会导致这样的问题。

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

此外，您需要确保从 API 中获取所需的数据。

Answer 2

非常感谢您的回答，我能够通过调节渲染来解决它，因为它实际上是在进行 API 调用之前渲染的

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

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

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

reactjs

react-hooks

use-effect