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

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)。正如您在回应中看到的那样，我有现场品牌的产品。如何循环品牌并删除重复项并将它们映射到侧导航？我想在选项卡组件旁边有一个侧导航小部件，它将显示该特定产品的所有可用品牌。

Answer 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
  });
});

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

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

用这个：

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

---

方法二：

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

{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存在。

---

我建议使用前一种方法，因为它（可能）性能更好，并且更易于阅读和调试。请注意，由于您的整个对象的复杂性，我可能错过了上面的一些小东西；然而，核心概念应该可以正常工作。

祝你好运。