React: uncatch TypeError: this.state.data.map 不是一个函数和

Question

我已经对此进行了一些挖掘，但还没有想出一个好的解决方案。这里提出了一个类似的问题，但我的不同之处在于我不想将string传递给map()方法。

无论如何，我只是使用 React 构建一个简单的天气检查应用程序，我使用的是开放天气图 API 5 天预报中的 API。

API 工作正常，我可以使用以下命令将数据记录到我的控制台：

componentDidMount () {
axios.get('http://api.openweathermap.org/data/2.5/forecast?q=London,uk&appid=APIKEY')
.then(response => {
console.log(response.data);
});
}

但是，当我将其映射到我的组件数组时，我从上面得到错误，说this.state.forecasts.map()不是一个函数：

天气.js

class Weather extends Component {
state = {
forecasts: []
}
componentDidMount () {
axios.get('http://api.openweathermap.org/data/2.5/forecast?q=London,uk&appid=APIKEY')
.then(response => {
this.setState({forecasts: response.data});
});
}
render() {
const projections = this.state.forecasts.map(forecast => {
return (<Subweather
date={forecast.dt_txt}
//temp={day.temp}
key={forecast.id}  /> );
});
return (
<div className={classes.WeatherDiv}>
{projections}
</div>

我对我在这里错过了什么有点困惑，有什么建议吗？

Answer 1

替换

this.setState({forecasts: response.data});

跟

this.setState({forecasts: response.data.list});