无法使用 .map() 渲染数组值
2015-09-11
125
我有这个:
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 扩展程序对其进行调试,我看到数组保持与屏幕截图中一样:
2个回答
如果
return
后面跟着换行符,JavaScript 会在它后面插入一个分号。即
function foo() {
return
42
}
与
function foo() {
return;
42
}
相同,即最后一行永远不会被评估,并且将返回
undefined
。
返回值必须始终位于或从与
return
语句相同的行开始:
return (
<div>...</div>
);
此外,无需以
this.props.meteo.weather[i]
的形式访问数据。该值已作为
d
传递给回调,因此您只需执行
d.astronomy[0].sunrise
即可。欲了解有关
.map
的更多信息,请参阅
MDN 文档
。
Felix Kling
2015-09-11
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>
},this )}
</div>
);
},
componentDidMount: function() {
return console.log(this.props.meteo.weather[0]["astronomy"][0]["sunrise"]);
},
});
this
在
map
函数中发生了变化,您可以通过第二个参数指定它,或者使用
()=>
ES6 箭头函数。
p2227
2015-09-11