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>

＆＃34;方向＆＃34;必须是＆＃34; r＆＃34;或＆＃34; l＆＃34;对于偶数和奇数元素。

我收到错误：

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

还有一件事，你应该改变的是跟随代码行

if (data[i] % 2 == 0)

应为if (i % 2 == 0)，因为data[i]将从data数组中返回对象

循环遍历ReactJs中的数组

1 个答案: