Как правильно обрабатывать объект данных из REST API с помощью выборки в React

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

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

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

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..."

Пример:


        // 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 (Loading)
        // 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 в массивы / объекты в состоянии Component?


person Mulli    schedule 27.11.2018    source источник
comment
Можете ли вы обновить свой пост, включив в него console.log переменной cpt после того, как вы поместите его в состояние?   -  person Shawn Andrews    schedule 27.11.2018
comment
Просто добавил console.log () в вызов fetch () и в рендер.   -  person Mulli    schedule 27.11.2018


Ответы (1)


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

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

person Alex Tepliashin    schedule 27.11.2018
comment
Обратите внимание на флаг isLoading, который предотвращает доступ к this.state до завершения fetch (). Что касается определения cpt. Я пытался установить его на объект и получил те же результаты - person Mulli; 27.11.2018
comment
вы можете установить isLoading как true, когда вы назначаете его в первый раз - person Alex Tepliashin; 27.11.2018
comment
Ты прав! Благодарю. Я установил для него значение true в componentDidMount. Просто реализовал это лучше в конструкторе. Благодарность - person Mulli; 27.11.2018
comment
Отлично, рад помочь! - person Alex Tepliashin; 27.11.2018