stackoom
  简体   繁体   中英

I can fetch the data from an API in react succesfuly. I can read some of the properties but trying to read most of the results in erros

 原文  2020-12-16 13:29:00  0   1    javascript/ node.js/ reactjs/ api/ request

Question

So I am geting some data from an api. When I console.log the data the page loads just fine and I can see on the console the data that has been sent which looks like this ["monster",{"hp":2040,"patk":74,"matk":108,"pdef":37,"mdef":37,"gold":68}] . When I console.log the data[0] I get back monster so that works as well. If i console.log the data[1] i get back an object that looks like this {"hp":2040,"patk":74,"matk":108,"pdef":37,"mdef":37,"gold":68} . But if I try for example the followin console.log(data[1].hp) I get a ton of errors. Why is this happening?

My code:



const url = "/monster"


const Monster = () =>{
    const [monster, setMonster] = useState([])
    

    const getMonster = async() =>{
    const response = await fetch(url)
    const monster = await response.json();
    setMonster(monster)}

    useEffect(()=>{
    getMonster()
    },[])


    return(
        <>
        <div className="monster-container-card" >
            <h1 className="level-title">Here is your generated monster</h1>
            <h2>{monster[0]}</h2>
        </div>
        
        
       </>
    )
    

}

export default Monster;```


Also these are the erros I get

Feched.js:24 Uncaught TypeError: Cannot read property 'hp' of undefined
    at FechedMons (Feched.js:24)
    at renderWithHooks (react-dom.development.js:14977)
    at mountIndeterminateComponent (react-dom.development.js:17803)
    at beginWork (react-dom.development.js:19041)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23956)
    at performUnitOfWork (react-dom.development.js:22768)
    at workLoopSync (react-dom.development.js:22699)
    at renderRootSync (react-dom.development.js:22662)
    at performSyncWorkOnRoot (react-dom.development.js:22285)
    at scheduleUpdateOnFiber (react-dom.development.js:21873)
    at updateContainer (react-dom.development.js:25474)
    at react-dom.development.js:26013
    at unbatchedUpdates (react-dom.development.js:22423)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26012)
    at Object.render (react-dom.development.js:26095)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (styles.css?a4b2:45)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
FechedMons @ Feched.js:24
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23956
performUnitOfWork @ react-dom.development.js:22768
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
scheduleUpdateOnFiber @ react-dom.development.js:21873
updateContainer @ react-dom.development.js:25474
(anonymous) @ react-dom.development.js:26013
unbatchedUpdates @ react-dom.development.js:22423
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26012
render @ react-dom.development.js:26095
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ styles.css?a4b2:45
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the <FechedMons> component:

    at FechedMons (http://localhost:3000/static/js/main.chunk.js:255:73)
    at Route (http://localhost:3000/static/js/0.chunk.js:37576:29)
    at Router (http://localhost:3000/static/js/0.chunk.js:37211:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:36831:35)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:75:73)

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.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:20077
update.callback @ react-dom.development.js:20110
callCallback @ react-dom.development.js:12310
commitUpdateQueue @ react-dom.development.js:12331
commitLifeCycles @ react-dom.development.js:20728
commitLayoutEffects @ react-dom.development.js:23418
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23143
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11268
commitRoot @ react-dom.development.js:22982
performSyncWorkOnRoot @ react-dom.development.js:22321
scheduleUpdateOnFiber @ react-dom.development.js:21873
updateContainer @ react-dom.development.js:25474
(anonymous) @ react-dom.development.js:26013
unbatchedUpdates @ react-dom.development.js:22423
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26012
render @ react-dom.development.js:26095
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ styles.css?a4b2:45
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react-dom.development.js:23267 Uncaught TypeError: Cannot read property 'hp' of undefined
    at FechedMons (Feched.js:24)
    at renderWithHooks (react-dom.development.js:14977)
    at mountIndeterminateComponent (react-dom.development.js:17803)
    at beginWork (react-dom.development.js:19041)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23956)
    at performUnitOfWork (react-dom.development.js:22768)
    at workLoopSync (react-dom.development.js:22699)
    at renderRootSync (react-dom.development.js:22662)
    at performSyncWorkOnRoot (react-dom.development.js:22285)
    at scheduleUpdateOnFiber (react-dom.development.js:21873)
    at updateContainer (react-dom.development.js:25474)
    at react-dom.development.js:26013
    at unbatchedUpdates (react-dom.development.js:22423)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26012)
    at Object.render (react-dom.development.js:26095)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (styles.css?a4b2:45)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
FechedMons @ Feched.js:24
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23956
performUnitOfWork @ react-dom.development.js:22768
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
scheduleUpdateOnFiber @ react-dom.development.js:21873
updateContainer @ react-dom.development.js:25474
(anonymous) @ react-dom.development.js:26013
unbatchedUpdates @ react-dom.development.js:22423
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26012
render @ react-dom.development.js:26095
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ styles.css?a4b2:45
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

1 answers

solution1
 0  2020-12-16 13:44:36

Check the returned data again.

As for data[1] , there is no second element in the data array as you can infer from the message
Cannot read property 'hp' of undefined .

Most likely you tried to log data[1].hp before the await s finished.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question I am trying to fetch json data from Rest API into react, but it showing some error How can I read Excel custom properties in Office Javascript API? I can't read a json object with fetch in react from my database How can I read data from a URL? Type Error 'Can't read properties of undefined' - Accessing API in React can not read some string from struts.properties Can't read properties of undefined React API call React Native how can I read QR code from gallery How can I fetch data from a Websocket in React? Why my api json data can't read my properties from the loop and append the html data to the dom?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM