不能使用.map()呈现数组值

Question

我有这个：

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扩展对其进行调试，我看到数组保持在屏幕截图中的样子：

​

​

Answer 1

JavaScript将在return后面插入分号，如果后面是行中断。也就是说。

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 documentation的信息。

Answer 2

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箭头函数。