materliu / gallery-by-react

one photo gallery project based on react.
MIT License
559 stars 171 forks source link

作用域的问题 #3

Open MiYogurt opened 8 years ago

MiYogurt commented 8 years ago
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