중복을 제거하여 배열을 매핑하는 방법

debugcn 에 게시 Dev

모하마드 이므 란

React.js를 사용하고 Relay.js를 사용하여 데이터를 가져오고 다음과 같은 구성 요소에 대한 JSON 응답을 사용하는 응용 프로그램을 개발 중입니다.

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

( github 링크 ) 그리고 다음과 같은 탭의 모든 제품을 매핑하고 있습니다.

<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 링크 ). 응답에서 볼 수 있듯이 필드 브랜드의 제품이 있습니다. 브랜드를 반복하고 중복을 제거하고 측면 탐색에 매핑하려면 어떻게해야합니까? 특정 제품에 사용할 수있는 모든 브랜드를 표시하는 탭 구성 요소 옆에 측면 탐색 위젯을 갖고 싶습니다.

크리스

위 코드에서 기존 루프를 수정하고 싶다고 가정합니다. 그렇다면 몇 가지 방법을 사용할 수 있습니다.

방법 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.

나는 (아마도) 더 나은 성능을 발휘하고 읽기 및 디버그하기 쉬운 이전 방법을 제안합니다. 전체 개체의 복잡성으로 인해 위의 사소한 부분을 놓쳤을 수 있습니다. 그러나 핵심 개념은 잘 작동합니다.

행운을 빕니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-16

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사