Question

我的地图功能渲染错误。

内容上的项目是一个数组（见下文）。并且＆＃39;内容＆＃39;它的父级传递了一个来自map的片段来切换语句（这里没有显示，因为我不认为这是问题所在，但如果需要可以粘贴）。问题地图中列表项的显示顺序是产品，关于，联系我们，产品。因此首先跳过Home并将其替换为最后一项＆＃39; Products＆＃39;。如果需要更多信息，请告诉我，谢谢。

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

问题与中继对象识别有关。有关它的更多信息，请参见specification。

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

正如@tomáš-holub已经指出的那样，Home和Products的本地ID是相同的。随着产品在列表后面出现，Home被覆盖了。

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

Answer 2

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

ES6中继列表未正确映射

2 个答案: