ES6 中继列表未正确映射

Question

我的地图函数渲染不正确。

内容上的项目是一个数组（见下文）。并且“内容”由其父级传递，其中包含从地图到 switch 语句的片段（此处未显示，因为我认为这不是问题，但可以在需要时粘贴）。问题图中列表项的显示顺序是产品、关于、联系我们、产品。因此，Home 被首先跳过并替换为最后一项“产品”。如果需要更多信息，请告诉我，谢谢。

const PageListItem = (props) => <Link to={props.item.id}>{props.item.value}</Link>;

const PageList = (props) => {
  return (
    <div style={styles.list}>
      { props.content.items.map( item => <PageListItem key={item._id} item={item} /> ) }
    </div>
  );
};

export default Relay.createContainer(Radium(PageList), {
  fragments: {
    content: () => Relay.QL`
      fragment on Content {
        items {
          _id
          id
          value
        }
      }
    `,
  }
});

被映射的数据的内容数组（来自猫鼬）

{ 
"_id" : ObjectId("920005cd1a38532d14349240"), 
"items" : [
    {
        "_id" : ObjectId("57102a0ad9601e34489223c1"), 
        "value" : "Home", 
        "id" : "110005cd1a38532d14349240", 
    }, 
    {
        "_id" : ObjectId("57102a0ad9601e34489223c0"), 
        "value" : "About", 
        "id" : "120005cd1a38532d14349240", 
    }, 
    {
        "_id" : ObjectId("57102a0ad9601e34489223bf"), 
        "value" : "Contact Us", 
        "id" : "130005cd1a38532d14349240", 
    }, 
    {
        "_id" : ObjectId("57102a0ad9601e34489223be"), 
        "value" : "Products", 
        "id" : "110005cd1a38532d14349240", 
    }
], 

Answer 1

问题与中继对象识别有关。更多信息请访问specification。

如果您在服务器端使用graphql-relay-js，则公开对象（GraphQLObject 类型）应具有关联的id 属性，该属性被视为本地ID。 graphql-relay-js 具有帮助函数 globalIdField 来将此本地 ID 转换为全局 ID。客户端的 Relay 使用此全局 ID 来区分不同的数据。

正如@tomáš-holub 已经指出的那样，Home 和 Products 的本地 ID 是相同的。由于 Products 在列表中排在后面，因此 Home 被覆盖。

为了安全起见，我通常会在对象/数据中添加id 属性，这些属性最终会作为 GraphQL 对象公开。使用MongoDB时，这些本地的ids通常是_ids（xyz.id = abc._id.toHexString()）。

Answer 2

问题是您的“主页”和“产品”项的 id 相同。如果您更改一个 id，它应该可以正常工作。