麻烦通过阵列上ReactJs

我想通过这个数组迭代迭代：麻烦通过阵列上ReactJs

events: [{ 
      "id": "123", 
      "key": "1", 
      "type": "academic", 
      "time": "2015 - 2016", 
      "title": " MSc in Software Engineering", 
      "place": "University of Oxford", 
      "location": "Oxford, United Kingdom", 
      "description": "Lorem impsum", 
      "gallery": [] 
    }, 
    { 
      "id": "234", 
      "key": "2", 
      "type": "professional", 
      "time": "2015 - 2016", 
      "title": " Software Engineer", 
      "place": "University of Oxford", 
      "location": "Oxford, United Kingdom", 
      "description": "Lorem impsum", 
      "gallery": [ 
        { 
      "index": 11, 
      "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" 
     } 
     ] 
    }, 
    { 
      "id": "567", 
      "key": "3", 
      "type": "misc", 
      "time": "2015 - 2016", 
      "title": " MSc Software Engineering", 
      "place": "University of Oxford", 
      "location": "Oxford, United Kingdom", 
      "description": "Lorem impsum", 
      "gallery": [ 
            { 
      "index": 1, 
      "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" 
     } 
     ] 
    } 
    ]

我的代码：

events.map((timelineEvent) => { 
     let directions; 
     if (timelineEvent % 2 == 0) { 
     directions = "direction-r"; 
     } else { 
     directions = "direction-l" 
     } 
     return (
     <li key={timelineEvent.id}> 
      <TimelineEvent 
      type = {timelineEvent.type} 
      time = {timelineEvent.time} 
      title = {timelineEvent.title} 
      place = {timelineEvent.place} 
      location = {timelineEvent.location} 
      description = {timelineEvent.description} 
      direction = {directions}> 
      <div>gallery</div> 
      <TimelineEditButton 
       deleteClick={timelineEvent.id} 
       dataId={ timelineEvent.id} 
       editClick={this.openPartial.bind(this, "editEventPartial")} /> 
      </TimelineEvent> 
     </li> 
    ); 
    });

但得到以下错误：

Error: Invariant Violation: Objects are not valid as a React child (found object with keys {id, key, type, time, title, place, location, description, gallery}). If you meant to render a collection of children, use an array instead or wrap the object using React.addons.createFragment(object).

我可以不明白是什么导致了这个，因为我是React的新手。我正在使用React 0.14-rc1。

请问有人能指出这个问题吗？由于

来源

2015-09-24 hilarl

某处您想要将数组的元素呈现为某个元素/组件的子元素。但它似乎并没有在你发布的代码中。 –

这是它正在尝试渲染的组件：https：//gist.github.com/hilarl/71a9f9029e90c9e68c2f – hilarl

您已经使用timelineEvent % 2 == 0，也许这就是问题所在？由于timelineEvent是一个对象，我猜你想要在“索引”或timelineEvent.id上执行此操作，而不是整个对象。

来源

2015-09-24 19:17:00 sanjaypojo

麻烦通过阵列上ReactJs

回答

相关问题