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

Question

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

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

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>
    )
}

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

Answer 1

您什么时候尝试访问它？

您能尝试一下吗？

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

Answer 2

在数据完成提取之前，render()方法可能试图访问this.state.weatherData。如果仅在数据存在时才显示，请尝试使用内联：

<div>
  {this.state.weatherData &&
    <p>{this.state.weatherData.weather[0].main}</p>
  }
</div>

Answer 3

在第一个渲染上，请求尚未开始，因此尚无数据，您需要具有一个加载布尔值，或者只是在尝试访问它之前检查是否已加载数据。

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

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

Answer 4

您必须考虑到 this.state.weatherData.weather 可能是 undefined 或 null。

应该试试这个：

{this.state.weatherData.weather ? this.state.weatherData?.weather[0].main : null}