ES6 中继列表未正确映射

Question

我的地图函数渲染有问题。

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

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
        }
      }
    `,
  }
});

正在映射的数据内容数组（来自 mongoose）

{ 
"_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

问题是您的项目 "Home" 和 "Products" 的 id 相同。如果你改变一个id，它应该可以正常工作。

Answer 2

问题与中继对象识别有关。 specification.

中提供了有关它的更多信息

如果您使用 graphql-relay-js on the server side, the exposed objects (GraphQLObject types) should have an associated id property, which is treated as local ID. graphql-relay-js has helper function globalIdField 将此本地 ID 转换为全球 ID。 Relay 在客户端使用这个全局 ID 来区分不同的数据。

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

为了安全起见，我通常会将id 属性添加到objects/data，最终暴露为GraphQL对象。当使用MongoDB时，这些本地id通常是_id（xyz.id = abc._id.toHexString()）。

ES6 中继列表未正确映射

ES6 Relay list not mapping correctly

relay

ecmascript-6

reactjs