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

Question

[Вика Мармеладка]

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

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


Компонент родитель

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;

Comments

[Михаил]

асинхронность? что это?

[Вика Мармеладка]

Михаил, да я помню про асинхронность и использовал для этого async await, но это не работает

[Вадим]

Запрос у Вас идёт после монтирования, а какие данные Вы ожидаете при первом монтировании?
Вот такие: this.state = { images: {} }

[Aetae]

Почему ипортируемый компонент срабатывает быстрее хука в React?