Как правильно обрабатывать объект данных из REST API, используя fetch в React

Question

У меня есть приложение React, которое получает объект с сайта WordPress, используя fetch () поверх остальных API (v2 / posts).

Объект содержит запись "acf", которая содержит ~ 30 вложенных записей: некоторыемассивы и некоторые объекты.Все сгенерировано с помощью плагина Advanced Custom Field.

Приложение обновляет эти данные (используя this.state) и сервер (выборка / публикация) по запросу пользователя.Все работает.Я не использую express, redux и т. П.

Моя текущая проблема заключается в том, что я не могу получить доступ к внутренним элементам записи "acf" в функции render (), в то время как я могу получить к ней доступ в ответе fetch.Я хотел бы иметь возможность получить доступ к

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

, используя имена записей.Но я получаю "не могу получить доступ к свойству undefined ..."

Пример:

        // In constructor:
        //     this.state = {
        //            isLoading: false, title:"", terms:[], cpt: []
        //     }
        ...
                fetch(url)
                .then(response => {
                    if (response.ok)
                        return response.json()
                    throw new Error('fetchTerm: Something went wrong ...')
                })
                .then(cpt => {             
                    var terms = Object.entries(cpt['acf'])
                    var title = Object.values(cpt['title'])

                    this.setState({cpt, terms, title, isLoading: false})
    .then( () => {
                console.log("title",this.state.cpt['title'])
                console.log("FAMILYLOG",this.state.cpt['acf']['familylog_array']) // shows ok
            })

                    return (true) // void - no one is looking...
                })
        //...
        render(){
            if (this.state.isLoading)
                    return (<b>Loading</b>)
        // occurs only after fetch resturn and this.state variables are instanciated
            console.log("title", this.state.title) // shows OK
            console.log("FAIL", this.state.cpt['title']) // cannot access property of NULL/Undefined...
            console.log("FAMILYLOG",this.state.cpt['acf']['familylog_array']) // same problem
        }

Чего мне не хватает?

Я хотел бы иметь возможность получить доступ cpt['acf']['entry']['subentry']

Должен ли я преобразовать cpt в массивы / объекты в состоянии Компонента?

Answer 1

в соответствии с вашим кодом вы инициализируете cpt: [] (который, скорее, должен быть объектом) в конструкторе, а затем вы делаете вызов API, и только когда обещание разрешено, вы изменяете состояние, дело в томпроисходит после первого вызова рендеринга , поэтому вы получаете сообщение «невозможно получить доступ к свойству NULL / Undefined» для cpt['acf']['entry']['subentry'], хотя this.state.cpt['title'] скорее вернет undefined в render()

Upd: чтобы предотвратить это, isLoading должен был быть установлен как true в конструкторе