鉴于Open Weather Map 当前天气数据 API，我正在尝试使用 ajax 将当前天气数据拉入我的 React.js 应用程序，提取给定城市的当前温度值，然后在我的组件中呈现该值。
我正在使用的测试 JSON 数据位于以下网址：http : //api.openweathermap.org/data/2.5/weather? id= 5391997& units= imperial
var CityGrid = React.createClass({
componentDidMount: function() {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?id=5391997',
// ^^ this should get a variable where id=5391997 is set
dataType: 'json',
success: function(data) {
this.setState({temp: data.main.temp});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState:function(){
return{
cities:[
{
name: "San Francisco",
id: 5391997,
temp: 50, // << this should receive value from ajax call
UTCOffset:-7,
address: 999 Nathan Lane,
phone: 555-5555
},
// 12 more city objects in this array, removed for brevity
]}
},
render: function() {
console.log(this.state.temp); // << this returns the right temp
// for San Francisco, because I hardcoded the value into the url
return(
<div className="city-grid">
{this.state.cities.map(function(city,i){
return(
<CityRow key={i} name={city.name} temp={city.temp}
UTCOffset={city.UTCOffset} address={city.address}
phone={city.phone}/>
);
})}
</div>
);
}
});
module.exports = CityGrid;
我的问题：
- 如何提取温度值？在我的渲染函数中，console.log 返回 JSON 对象，这意味着数据已经绑定并且可以在我的渲染函数中访问。但是，当我尝试获取温度时（我希望它类似于 ）
this.state.data.main.temp，我收到“数据未定义”的错误消息。然后，我希望能够在我的城市对象中id: 5391997,为 12 个城市中的每一个设置此值 。
更新^^ 这已解决：@dkurbz 建议在我的 ajax 成功方法中将状态设置为 temp 对我来说很好。
- 我也面临着如何为每个城市唯一设置 url 的挑战。在我的 ajax 调用中，
id=5391997我想从城市对象中获取 ，并将我的 ajax url 更改为“baseURl”+this.props.id+“&units=imperial”。我完全不知道如何做到这一点。
更新^^ 这是我目前卡住的地方。