ReactJS-TypeError：无法读取未定义的属性“ 0”

我正在尝试制作一个天气应用程序，以学习一些ReactJS。

我在组件内部的方法中使用此访存调用了OpenWeatherMap API 。componentDidMountWeatherCard

constructor() {
    super()
    this.state = {
        weatherData: {}
    }
}

componentDidMount() {
    fetch('//api.openweathermap.org/data/2.5/weather?q=Calgary,ca&APPID=XXX')
    .then(response => response.json())
    .then(data => {
        this.setState({
            weatherData: data
        })
    })
}

这是上述调用的示例JSON输出（给出了有效的API密钥）：

每当我想访问天气属性时，都会收到此错误消息：

TypeError：无法读取未定义的属性“ 0”

...，我这样访问它：

this.state.weatherData.weather[0].main

如果可以解决问题，这也是我的渲染方法：

render() {
    return (
        <div>
            {this.state.weatherData.weather[0].main}
        </div>
    )
}

有人知道我遇到的问题是什么吗？非常感谢！