如何在React中使用Fetch正确处理来自REST API的数据对象

Question

I have a React app that receives an object from WordPress site using fetch() over rest api (v2/posts).

The object contains an "acf" entry which holds ~30 sub entries: some arrays and some are objects. All generated with Advanced Custom Field plugin.

The application is updating this data (using this.state) and the server (fetch/post) upon user request. All is working. I am not using express, redux and the like.

My current problem is that I cannot access the internals of the "acf" entry in render() function, while I can access it within the fetch response. I would like to be able to acccess

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

using the entry's names. But I get "cannot access property of undefined..."

Example:

\n\n        // In constructor: \n        // this.state = { \n        // isLoading: false, title:"", terms:[], cpt: [] \n        // } \n        ... \n                fetch(url) \n                .then(response => { \n                    if (response.ok) \n                        return response.json() \n                    throw new Error('fetchTerm: Something went wrong ...') \n                }) \n                .then(cpt => {              \n                    var terms = 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("title",this.state.cpt['title']) \n                console.log("FAMILYLOG",this.state.cpt['acf']['familylog_array']) // shows ok \n            }) \n\n                    return (true) // void - no one is looking... \n                }) \n        //... \n        render(){ \n            if (this.state.isLoading) \n                    return (  ) \n        // occurs only after fetch resturn and this.state variables are instanciated \n            console.log("title", this.state.title) // shows OK \n            console.log("FAIL", this.state.cpt['title']) // cannot access property of NULL/Undefined... \n            console.log("FAMILYLOG",this.state.cpt['acf']['familylog_array']) // same problem \n        } \n\n

What am I missing?

I would like to be able to acccess cpt['acf']['entry']['subentry']

Should I regenerate the cpt into arrays/objects in the Component state?

Answer 1

according to your code you initialize cpt: [] (which should rather be an object though) in the constructor and then you make a call to the api and only when the promise is resolved you will modify the state, the thing is it happens after the first render call is done, so you get "cannot access property of NULL/Undefined" for cpt['acf']['entry']['subentry'] , though this.state.cpt['title'] will rather return undefined in the render()

Upd: To prevent this, isLoading should have been set as true in the constructor