javascript - 在 ReactJs 中循环数组

Question

我正在尝试循环遍历数组并在元素内呈现数据。我正在使用 ReactJs。

我的数据数组:

var data = [{
      type: "Academic",
      time: "2015 - 2016",
      title: " MSc Software Engineering",
      place: "University of Oxford",
      description: "Lorem impsum",
      gallery: [
        {url: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/v/t1.0-1/p160x160/10923196_10204583699694173_6145976884213630323_n.jpg?oh=bd235908314ecf0ab5afa8d3f92f5abf&oe=567B51F9&__gda__=1450897067_285c7c8c720c0f130453b37e9ff9b2f8"}
      ]
    }

数据应该被推送到的数组:

var events = []

循环:

for (var i = 0; i < data.length; i++) {
      var directions;
      if (data[i] % 2 == 0) {
        directions = "direction-r";
      } else {
        directions = "direction-l"
      }
      events.push(
        <li>
          <TimelineEvent type={data[i].type}
            time = {data[i].time}
            title = {data[i].title}
            place = {data[i].place}
            description = {data[i].description}
            direction = {directions}/>
        </li>
      )
    }

渲染数据需要是什么样子:

<li>
  <TimelineEvent
     type = "Academic"
     time = "2015 - 2016"
     title = "MSc Software Engineering",
     place = "University of Oxford",
     description = "Lorem ipsum"
     direction = "direction-r" />
</li>
<li>
  <TimelineEvent
     type = "Academic"
     time = "2015 - 2016"
     title = "MSc Software Engineering",
     place = "University of Oxford",
     description = "Lorem ipsum"
     direction = "direction-l" />
</li>

对于偶数和奇数元素，“方向”必须是“r”或“l”。

我收到错误:

TypeError: Cannot read property 'type' of undefined
   at Timeline.render (/Users/hilarl/Desktop/client/build/webpack:/src/components/ProfilePage/Layout/Main/Main.js:102:41)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactCompositeComponent.js:546:34)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactCompositeComponent.js:566:32)
   at [object Object].wrapper [as _renderValidatedComponent] (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactPerf.js:66:21)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactCompositeComponent.js:181:32)
   at [object Object].wrapper [as mountComponent] (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactPerf.js:66:21)
   at Object.ReactReconciler.mountComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactReconciler.js:37:35)
   at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactMultiChild.js:207:44)
   at ReactDOMComponent.Mixin._createContentMarkup (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactDOMComponent.js:541:32)
   at ReactDOMComponent.Mixin.mountComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactDOMComponent.js:438:27)

我并不是真正的 JS 专业人士，所以我可能做得不对。知道这里出了什么问题吗？非常感谢

Answer 1

也许可以尝试:

for (var i = 0; i < data.length; i++) {
      var directions;
      if (data[i] % 2 == 0) {
        directions = "direction-r";
      } else {
        directions = "direction-l"
      }
      events.push(
        <li>
          <TimelineEvent type={data[i].type}
            time = {data[i].time}
            title = {data[i].title}
            place = {data[i].place}
            description = {data[i].description}
            direction = {directions}/>
        </li>
      )
    } 

您也可以使用 forEach 而不是 for 循环。