如何在React中使用Fetch正確處理來自REST API的數據對象

Question

我有一個React應用程序，它通過REST API（v2 / posts）上的fetch（）從WordPress站點接收對象。

該對象包含一個“ acf”條目，其中包含約30個子條目：有些數組，有些是對象。 全部使用高級自定義字段插件生成。

應用程序應用戶請求更新此數據（使用this.state）和服務器（獲取/發布）。 一切正常。 我沒有使用express，redux之類的東西。

我當前的問題是我無法訪問render（）函數中“ acf”條目的內部，而可以在訪存響應中訪問它的內部。 我希望能夠進入

cpt['acf']['entry']['subentry']

使用條目的名稱。 但是我得到“無法訪問未定義的屬性...”

例：

\n\n         //在構造函數中：\n         // this.state = {\n         // isLoading：false，title：“”，條款：[]，cpt：[]\n         //}\n         ...\n                 取（URL）\n                 .then（response => {\n                     如果（response.ok）\n                         返回response.json（）\n                     拋出新錯誤（'fetchTerm：出問題了...'）\n                 }）\n                 .then（cpt => {             \n                     var條件= Object.entries（cpt ['acf']）\n                     var title = Object.values（cpt ['title']）\n\n                     this.setState（{cpt，terms，title，isLoading：false}）\n     .then（（）=> {\n                 的console.log（ “標題”，this.state.cpt [ '標題']）\n                 console.log（“ FAMILYLOG”，this.state.cpt ['acf'] ['familylog_array']）//顯示正常\n             }）\n\n                     return（true）//無效-沒有人在尋找...\n                 }）\n         // ...\n         渲染（）{\n             如果（this.state.isLoading）\n                     返回（ 加載中 ）\n         //僅在獲取取回並且this.state變量實例化之后才發生\n             console.log（“ title”，this.state.title）//顯示正常\n             console.log（“ FAIL”，this.state.cpt ['title']）//無法訪問NULL / Undefined屬性...\n             console.log（“ FAMILYLOG”，this.state.cpt ['acf'] ['familylog_array']）//同樣的問題\n         }\n\n

我想念什么？

我希望能夠使用cpt['acf']['entry']['subentry']

我應該在Component狀態下將cpt重新生成為數組/對象嗎？

Answer 1

根據您的代碼，您可以在構造函數中初始化cpt: [] （盡管它應該是一個對象），然后您對api進行調用，並且只有在答應被解決時，您才可以修改狀態，但事情發生在第一個渲染調用已經完成，因此您會獲得cpt['acf']['entry']['subentry'] this.state.cpt['title'] cpt['acf']['entry']['subentry'] “無法訪問NULL / Undefined屬性cpt['acf']['entry']['subentry'] ，盡管this.state.cpt['title']寧願在render()返回undefined

Upd：為避免這種情況，應在構造函數中將isLoading設置為true