我可以成功地从 API 中获取数据。我可以读取一些属性，但尝试读取错误中的大部分结果答案

【问题标题】：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我可以成功地从 API 中获取数据。我可以读取一些属性，但尝试读取错误中的大部分结果
【发布时间】：2021-03-27 04:09:24
【问题描述】：

所以我从 api 获取一些数据。当我控制台记录数据时，页面加载得很好，我可以在控制台上看到已发送的数据，看起来像这样["monster",{"hp":2040,"patk":74,"matk":108,"pdef":37,"mdef":37,"gold":68}]。当我 console.log 数据 [0] 时，我会返回 monster，这样也可以正常工作。如果我 console.log 数据 [1] 我会返回一个看起来像 {"hp":2040,"patk":74,"matk":108,"pdef":37,"mdef":37,"gold":68} 的对象。但是，如果我尝试例如以下console.log(data[1].hp) 我会收到大量错误。为什么会这样？

我的代码：



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

【问题讨论】：

标签： javascript node.js reactjs api request

【解决方案1】：

再次检查返回的数据。

至于data[1]，您可以从消息中推断出data 数组中没有第二个元素
Cannot read property 'hp' of undefined。

您很可能尝试在awaits 完成之前记录data[1].hp。

【讨论】：

不好意思问了，因为我一直在搜索，还没有找到回复，等待完成后如何渲染页面？
很难说没有看到更多的代码，但你可能需要将你的渲染移动到一个承诺解析的函数中。