Reactjs ES6继电器列表映射不正确

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

内容上的项目是一个数组（见下文）。“content”由其父级传递，带有一个来自map to switch语句的片段（此处不显示，因为我认为这不是问题所在，但如果需要，可以粘贴）。问题图中列表项的显示顺序为Products、About、Contact Us、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
        }
      }
    `,
  }
});

---

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

问题与中继对象标识有关。有关它的更多信息，请访问

如果在服务器端使用，则公开的对象（GraphQLObject类型）应具有关联的

id

属性，它被视为本地ID。

graphql relay js

具有帮助函数，可将此本地ID转换为全局ID。客户端的relay使用此全局ID区分不同的数据段

正如@tomáš-holub已经指出的，家庭和产品的本地ID是相同的。由于产品在列表中的位置较晚，Home被覆盖

---

为了安全起见，我通常将

id

属性添加到对象/数据中，这些对象/数据最终作为GraphQL对象公开。当使用MongoDB时，这些本地

id

s通常是

\u id

s（

xyz.id=abc.\u id.toHexString（）

）。

天哪，我想我已经试过了，但它仍然不起作用。既然_id不同，用于密钥，那么这又有什么关系呢。你认为这与一个to={props.item.id}与另一个相同的链接有关吗？我仍然希望它能够映射相同的值（_id将是唯一的）我尝试在这里克隆功能：它似乎按照预期工作，即Link（在本例中是MyLink）具有预期的id（即两个id相同），并且值是正确的。如果没有帮助，请尝试使用alert（JSON.stringify（props））输出函数的参数……首先感谢您付出了这么多的努力来提供帮助。所以我已经试着让它工作了一段时间，但仍然不能正常工作。它不断渲染两次产品。它抱怨说即使id不同，钥匙还是一样。当我打印页面列表的JSON时，它会提取产品，关于，联系我们，产品。PageListItem正在很好地呈现所给出的内容。因此，页面列表应该是问题所在，但是当我在GraphiQL中查看查询时，它返回的是正确的列表。因此，问题可能是relay中的PageList查询或其映射。现在让我感到困惑的是，如果我将id字段从渲染/查询中完全删除，并且只使用“\u id”和“value”，它仍然会说我有相同的键。然后，如果我进入数据库，将产品的“id”更改为不同的，就像你第一次说的那样，它工作正常。。。（虽然仍然没有在任何子组件中使用id），所以我想出了一个解决方案。我认为graphql将“id”字段与graphql id混淆了。我将“id”字段中的字符串放入一个名为“key”的字段中，在将“id”保留为空/null时，一切正常。奇怪的是，如果我使用“id”并将其设置为null，graphql不会在列表中混淆它。请注意，其他有此经验的人：不要命名字段id，因为graphql可能会混淆它。你认为我应该为这个问题创造一个新的答案吗？

{ 
"_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", 
    }
],