gallery-by-react
gallery-by-react copied to clipboard
作用域的问题
require('normalize.css/normalize.css');
require('styles/App.styl');
import React from 'react';
// 获取相关数据 json 文件
var imageDatas = require('../data/imageDatas.json');
window.console.log(imageDatas);
/**
* 通过filename,拼接文件名,拿到图片URL,为对象添加imageURL属性
* @param {Array}
* @return {Array}
*/
imageDatas = ((imageDatasArr) => {
for (let i = 0; i < imageDatasArr.length; i++) {
let singleImageDara = imageDatasArr[i];
singleImageDara.imageURL = require('../images/'+singleImageDara.fileName);
imageDatasArr[i] = singleImageDara;
}
})(imageDatas);
let controllerUnits,imgFigures = [];
window.console.log(imageDatas);
imageDatas.forEach((value,index) =>{
imgFigures.push(<ImgFigure data = {value} key={'imgFigures'+index}/>);
});
class ImgFigure extends React.Component {
render() {
return (
<figure>
<img src={this.props.data.imageURL}
alt={this.props.data.title}/>
<figurecaption>
<h2>{this.props.data.title}</h2>
</figurecaption>
</figure>
);
}
}
class AppComponent extends React.Component {
render() {
return (
<section className="stage">
<section className="img-sec">
{imgFigures}
</section>
<nav className="controller-nav">
{controllerUnits}
</nav>
</section>
);
}
}
AppComponent.defaultprops = {
};
export default AppComponent;
[Object, Object, Object, Object, Object, Object, Object, Object] // 第一个log,且里面有imageURL属性
undefined // 第二个log
Main.js?7cd4:30 Uncaught TypeError: Cannot read property 'forEach' of undefined
为什么会是这个样子?为什么这么魔性哦?看了3、4个小时没看懂。写到render
里面也是undefined