Question

ReactJS-TypeError：无法读取未定义的属性‘0’

2018-12-31

19877

reactjs

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

我在我的 WeatherCard 组件内的 componentDidMount 方法中使用此提取调用了 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: Cannot read property '0' of undefined

... 我像这样访问它：

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

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

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

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

Answer 1

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

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

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

Answer 2

您何时尝试访问它？

您可以尝试这个吗：

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

Answer 3

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

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