Почему я получаю в начале undefined и только после данные?

У меня есть компонент который делает ajax запрос с помощью библиотеки axios и передают данные в дочерний компонент. Я использовал async и await для componentDidMount, но это не помогло

Если посмотреть в логах то я получаю следующее:
60c7ba048eb5e932838785.png

Компонент родитель
import React from "react";
import Instagram from "./Instagram";
import * as axios from "axios";

class InstagramContainer extends React.Component {
    constructor(props) {
        super(props)

        this.state = { images: {} }
    }

    async componentDidMount() {
        await axios.get('https://jsonplaceholder.typicode.com/photos')
        .then(response => {
            this.setState({
                images: response.data,
            })
        })
    }


    render() {
        return <Instagram images={this.state.images}/>
    }
}

export default InstagramContainer

Дочерний компонент
import React from 'react'
import styles from './Instagram.module.scss'

class Instagram extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        console.log(this.props);

        return(
            <div className={styles.Instagram}>

            </div>
        )
    }
}

export default Instagram;
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Потому, что запрос, оказывается, асинхронный и на момент загрузки undefined
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы