Question

我已经对此进行了一些挖掘，但尚未找到一个好的解决方案。我问了一个类似的问题here，但我的不同之处在于我没有尝试将string传递给map()方法。

无论如何，我只是使用React构建一个简单的天气检查应用程序，我使用Open Weather Map 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()不是函数：

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>

我对这里遗失的内容有什么疑问，有什么建议吗？

Answer 1

替换

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

带

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

React：未捕获TypeError：this.state.data.map不是函数，

1 个答案: