1

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

内容上的项目是一个数组（见下文）。并且“内容”由其父级传递，其中包含从地图到 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", 
    }
],
4

2 回答 2

2

该问题与中继对象识别有关。有关它的更多信息，请参阅规范。

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

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

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

于 2016-04-18T22:29:06.327 回答
1

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

于 2016-04-17T18:13:15.463 回答