Невозможно проанализировать данные JSON, возвращенные методом выборки в React

Question

Перед пометкой дубликат будет хорош, если вы прочитаете один раз.Я действительно, искал по этому.Я пишу приложение React для создания мема.Я могу успешно подключить REST API и получить данные.Проблема заключается в том, что при попытке проанализировать данные я получаю сообщение об ошибке, которое обобщает, что я пытаюсь получить доступ к неопределенному объекту, а это не так.

Я попробовал один и тот же код статически (без рендеринга React) в другом редакторе, и он работает нормально.

Вот мой код,

class App extends React.Component{

    state = {memes : []};

    componentDidMount(){
        fetch(
            `https://api.imgflip.com/get_memes`

        ).then(
            (response) => {
                if(response.ok){
                    return response;
                }else{
                    console.log('no response');
                }
            }
        ).then(data => data.json()).then(data => {
            console.log(data); //This is getting printed fine
           // console.log(data.memes[1].name); //un-commenting this is throwing error that 'Cannot read property '1' of undefined'
            this.setState({memes:data.memes});


        });
 }
    render(){
        if(this.state.memes.length > 0){
            //For this I am getting error
            //Uncaught TypeError: Cannot read property 'length' of undefined
            console.log('array length is : ' + this.state.memes.length);
        }else{
            //This is printed fine
            console.log('Here array length is : ' + this.state.memes.length);

        }
        return (
            <div>
                <MemeImage/>
            </div>
        );
    }
}

export default App;

Проблема в том, что во второй раз рендеринг (после выборки данных) реагирует, предполагая, что data.memes не существует, что для меня абсурдно.Согласно моему журналу консоли, он существует.Пример:

data:
memes: Array(100)
0: {id: "112126428", name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg", width: 1200, height: 800, …}
1: {id: "87743020", name: "Two Buttons", url: "https://i.imgflip.com/1g8my4.jpg", width: 600, height: 908, …}
2: {id: "102156234", name: "Mocking Spongebob", url: "https://i.imgflip.com/1otk96.jpg", width: 502, height: 353, …}
3: {id: "129242436", name: "Change My Mind", url: "https://i.imgflip.com/24y43o.jpg", width: 482, height: 361, …}

Я проверил демонстрационные данные, как показано ниже на соответствующем веб-сайте.В соответствии с этим, data.memes[0].name совершенно правильно.Я попробовал это, и это сработало.

    {
    "success": true,
    "data": {
        "memes": [
            {
                "id": "61579",
                "name": "One Does Not Simply",
                "url": "https://i.imgflip.com/1bij.jpg",
                "width": 568,
                "height": 335,
                "box_count": 2
            }
    ]
    }
  }

Но на самом деле, не имеет понятия, что происходит во время рендеринга React, что он выбирает объект 'data', но не может получить доступ к свойствам внутри.Любая помощь в отношении того, что я не понимаю о рендеринге React, будет очень признательна.

Answer 1

Используйте этот код

this.setState({memes:data.data.memes});

Когда вы console.log ваши данные

console.log(data)

Вы получаете

{
 data: Object
 success: true
}

Таким образом, вам нужно войти в данныедоступ к мемам,