无法使用.map（）渲染数组值

Question

我有这个：

public static String excelRead() throws Exception

但我得到一个空洞的结果！即使控制台提供我期望的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"]); }, }); ，并使用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即可。详细了解MDN documentation中的.map。

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