ReactJS - 类型错误 : Cannot read property '0' of undefined

Question

我正在尝试制作一个天气应用来学习一些 ReactJS。

我调用 OpenWeatherMap API 在我的 WeatherCard 组件内的 componentDidMount 方法中使用此获取。

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 key ):

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

TypeError: Cannot read property '0' of undefined

...我像这样访问它:

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

如果它有助于解决问题，这也是我的渲染方法:

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

有谁知道我遇到的问题可能是什么？非常感谢!

Answer 1

在第一次渲染时，请求尚未开始，因此还没有数据，您需要有一个加载 bool 值，或者在尝试访问之前检查数据是否已经加载。

render() {
    if (!this.state.weatherData.weather) {
        return <span>Loading...</span>;
    }

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