React api och promise

Jag har suttit och försökt lösa det här problemet i flera timmar nu men fattar inte vad som är fel. Jag har kollat att jag får rätt objekt med console.log. Men programmet crachar när jag försöker sätta <h2> rubriken längst ner och det är själva tempen som är undefined vid det ögonblicket.

Jag fattar att anropet sker asynkront och att weather.current.temp_c inte hunnit få något värde än. Men jag förstår inte hur jag ska lösa problemet. Någon som har något tips till mig?

import React, { useState, useEffect } from 'react'
import axios from 'axios'


const Weather = ({ capital }) => {

    const [weather, setWeather] = useState([])

    const getWeatherData = () => {
        axios.get('http://api.apixu.com/v1/current.json?key=...' + capital)
            .then(response => {
                setWeather(response.data)
            })
    }

    useEffect(getWeatherData, [])

    return (
    <h2>Weather in {capital} temp:{weather.current.temp_c}</h2>
    )

}

export default Weather

Du passar bara in din funktion som en referens i useEffect, du måste invoka den.

useEffect(() => getWeatherData(), []);

Annars vid asynkrona anropt brukar man kunna visa en loading spinner eller dylikt tills att datan hämtats.
Den kommer köra rendern först och då visas loaden, sen då datan kommer in kommer komponenten renderas om och då visas datan.