开发者问题收集

无法使用 .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 扩展程序对其进行调试,我看到数组保持与屏幕截图中一样:

Screenshot

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"]);
},
});

thismap 函数中发生了变化,您可以通过第二个参数指定它,或者使用 ()=> ES6 箭头函数。

p2227
2015-09-11