我有这个:
var Astronomy = React.createClass({
getDefaultProps: function() {
return {meteo : JSON.parse(localStorage.getItem('meteo')).data};
},
render: function() {
return (
<div className="temps">
{this.props.meteo.weather.map(function(d, i) {return
<div className="waqt">
<div className="temps">
<div className="raise">
<div className="sunraise"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["sunrise"]}</i></div>
<div className="sunset"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["sunset"]}</i></div>
</div>
<div className="set">
<div className="moonraise"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["moonrise"]}</i></div>
<div className="moonset"><i className="riz">{this.props.meteo.weather[i]["astronomy"][0]["moonset"]}</i></div>
</div>
</div>
</div>
}
)}
</div>
);
},
componentDidMount: function() {
return console.log(this.props.meteo.weather[0]["astronomy"][0]["sunrise"]);
},
});
但我得到的结果是空的!甚至控制台也给出了我所期望的 06:19 AM
,并使用 chrome 扩展程序对其进行调试,我看到数组保持在屏幕截图中的样子:
最佳答案
JavaScript 将在 return
后面插入一个分号,如果它后面跟一个换行符。 IE。
function foo() {
return
42
}
与
相同function foo() {
return;
42
}
即最后一行永远不会被评估,undefined
将被返回。
返回值必须始终与 return
语句位于或开始于同一行:
return (
<div>...</div>
);
也没有必要像this.props.meteo.weather[i]
那样访问数据。该值已作为 d
传递给回调,因此您只需执行 d.astronomy[0].sunrise
。在 MDN documentation 中了解有关 .map
的更多信息.
关于javascript - 无法使用 .map() 呈现数组值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32514355/