React .map()不是函数错误 [英] React .map() is not a function error
问题描述
import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
export default class App extends Component {
constructor() {
super();
this.state = {
weather: []
};
}
componentDidMount (){
this.search();
}
search = () => {
axios.get("http://api.openweathermap.org/data/2.5/weather?q=Houston&APPID=f2327cca8f3d665f4c9f73b615b294ed")
.then(res => {
this.setState({weather: res.data});
}).catch(error => {
console.log('Error from fetching data', error);
})
}
render() {
console.log(this.state.weather);
const weathermap = this.state.weather.map( (maps) =>{
{maps.wind.speed}
});
return (
<div className="container">
<div className="row">
<div className="col-md-4 col-md-offset-4">
<div className="weather">
<div className="current">
<div className="info">
<div> </div>
<div className="city">
<small>
<small>CITY:</small>
</small>
{this.state.weather.name}</div>
<div className="temp">67°
<small>F</small>
</div>
<div className="wind">
<small>
<small>WIND:{weathermap}</small>
</small>
</div>
<div> </div>
</div>
<div className="icon">
<span className="wi-day-sunny"></span>
</div>
</div>
<div className="future">
<div className="day">
<h3>Mon</h3>
<p>
<span className="wi-day-cloudy"></span>
</p>
</div>
<div className="day">
<h3>Tue</h3>
<p>
<span className="wi-showers"></span>
</p>
</div>
<div className="day">
<h3>Wed</h3>
<p>
<span className="wi-rain"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
我收到"this.state.weather.map不是函数"错误.我正在从天气api获取数据.我从api中得到的名称显示正常. api称自己还可以,也是成功的. 这里的api在控制台
I am getting a "this.state.weather.map is not a function" error. I am fetching data from weather api. I got the name from api displayed ok. api call it self is ok is success too. here how the api looks like in console
这是代码
推荐答案
您要说出this.state = { weather: []};
实例化该应用程序.但是,当您说this.setState({weather: res.data})
时,您将this.state.weather
覆盖为JavaScript object
而不是array
,因此.map
不再可用.
You are instantiating the app by saying this.state = { weather: []};
. However, When you say this.setState({weather: res.data})
, you are overriding the this.state.weather
to a JavaScript object
rather than array
, thus the .map
is not available anymore.
只需const weathermap = this.state.weather.wind.speed
这篇关于React .map()不是函数错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!