反应：未捕获的TypeError：this.state.data.map不是函数，并且

Question

I did some digging on this already but haven't come up with a good solution yet. A similar question was asked here but my difference is that I'm not trying to pass a string to the map() method.

Anyways, I'm just building a simple weather checked app using React, I'm using the API from Open Weather Map API 5 day forecast.

The API works fine, I can log the data to my console using the below:

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

}

But, when I got to map it to my array of component, I get the error from above, saying that this.state.forecasts.map() is not a function:

Weather.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>

I'm a little confused as to what I'm missing here, any suggestions?

Answer 1

replace

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

with

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