Question

我正在使用React.js开发一个应用程序，并使用Relay.js来获取数据并对这样的组件进行JSON响应：

{
  outfit(id :"T3V0Zml0Tm9kZTo1") {
    id
    title
    productvariant {
      edges {
        node {
          id
          title
          product {
            edges {
              node {
                id
                brand
              }
            }
          }
        }
      }
    }
  }
}

（github link）我正在这样的标签中映射所有产品：

<Grid>
  { this.props.outfit.productvariant.edges.map((variantEdge, i) => (
    <Grid.Column mobile={16} tablet={8} computer={12}>
      <Grid.Column mobile={16} tablet={8} computer={12}>
        <article id ={variantEdge.node.id} >
          <header style = {styles.header}>
            <h2>
              {variantEdge.node.title}
            </h2>
          </header>
        </article>
        <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
          <Tab eventKey={1} title="Tab 1">
            <section style = {styles.row}>
              {variantEdge.node.product.edges.map((productEdge,i) =>(
                <section >
                  <section  >
                    <Card   style = {styles.col23} >
                      <Image src="https://cdn.lookastic.com/beige-dress-shirt/roberto-cavalli-ruffled-cotton-voile-shirt-medium-591164.jpg" />
                        <Card.Content  style = {styles.col23}>
                          <Card.Header>{productEdge.node.title}</Card.Header>
                        </Card.Content>
                      </Card>
                    </section>
                  </section>
                ))}
              </section>

（github link）。正如您所看到的，我有产品与现场品牌。如何循环Brands并删除重复项并将它们映射到侧导航？我希望在标签组件旁边有一个侧面导航小部件，它将显示该特定产品的所有可用品牌。

Answer 1

我假设你想在上面的代码中修复你现有的循环？如果是这样，你可以通过几种方式实现这一目标。

方法1：

这是最干净，最易读的版本，但它要求您在render()函数之前和之外运行一些代码。

var mySet = new Set();
this.props.outfit.productvariant.edges.forEach((variantEdge) => {
  variantEdge.node.product.edges.forEach((productEdge) =>
    mySet.add(productEdge.node.brand);  //add each brand to a Set, which guarantees uniqueness
  });
});

然后，您可以在map()内执行render()。替换这个：

{variantEdge.node.product.edges.map((productEdge,i) =>(

用这个：

[...mySet].map((productEdge, i) => (

方法2：

这是一个方便的单行，你可以使用。它不是很易读，但如果你想要一些紧凑的东西，那就有用了：

{variantEdge.node.product.edges.filter((productEdge, i, self) => self.findIndex((p) => {return p.node.brand === productEdge.node.brand}) === i.node.brand).map((productEdge, i) => (

上述代码假定存在productEdge.node.brand。

我建议使用前一种方法，因为它可能（可能）性能更好，也更容易阅读和调试。请注意，由于整个对象的复杂性，我可能错过了一些小问题;然而，核心概念应该可以正常运作。

祝你好运。

如何通过删除重复项来映射数组

1 个答案:

方法1：

方法2：