GatsbyJS（ReactJS）で重複している要素を除外して表示させたい。

Question

お世話になります。
GatsbyJSでカテゴリー一覧を表示するコンポーネントを作成しています。
しかし、重複して表示されてしまい上手くいきません。
ご教授いただければ幸いです。

import React from "react";
import { Link } from "gatsby";
import "./Category.css";

class Category extends React.Component {
  getPostList() {
    let postList = [];
    this.props.postEdges.forEach(postEdge => {
      postList.push({
        category: postEdge.node.frontmatter.category,
　　　　categoryslug: postEdge.node.frontmatter.categoryslug,
      });
    });
    return postList;
  }
  render() {
    const postList = this.getPostList().filter(function (category, index, self) {
            return self.indexOf(category) === index;
        });
    return (
      <div className="grid">
        postList.map(post => (
        <div className="item">
          <p>{post.category}</p>
        </div>
        ))}
      </div>
    );
  }
}

export default Category;

Comments

[jun68ykt]

こんにちは。 this.props.postEdges で渡されてくる配列の各要素がどのような構造になっているのかを知りたいので、postEdges　のサンプルを質問に追記して頂ければと思います。

[1042limit]

お世話になります。
GraphiQLのデータを提示させていただきます。
{
"data": {
"allMarkdownRemark": {
"edges": [
{
"node": {
"fields": {
"slug": "/the-butterfly-of-the-edge",
"date": "2017-03-19T15:00:00.000Z"
},
"excerpt": "Hanc indeploratum seram Amphitryoniadae tremulis pauperque manum Cognoscenti audeat ulterius sublimia terga potiorque saxo あいうえお\nLorem…",
"timeToRead": 1,
"frontmatter": {
"title": "The Butterfly of the Edge",
"tags": [
"programming",
"more tags",
"testing",
"another one",
"stuff",
"other"
],
"cover": "https://unsplash.it/1152/300/?random?TheButterflyoftheEdge",
"date": "17/03/2017",
"category": "tech",
"categoryslug": "tech"
}
}
},
{
"node": {
"fields": {
"slug": "/the-fairys-witches",
"date": "2002-04-19T15:00:00.000Z"
},
"excerpt": "Eram mora tuas in inter ferens caterva Ait oculos Lorem markdownum. Dedit caput, saxa lenis adhibere negarunt substiterat et ab\ntestes…",
"timeToRead": 1,
"frontmatter": {
"title": "The Fairy's Witches",
"tags": null,
"cover": "https://unsplash.it/1152/300/?random?FaityWitch",
"date": "02/04/2017",
"category": "something",
"categoryslug": "something"
}
}
},
{
"node": {
"fields": {
"slug": "/random-project-4-with-super-long-title-phase-one",
"date": "2002-03-19T15:00:00.000Z"
},
"excerpt": "Artificem honorati ore temperat Lycus quam antiquum Mendaci pinu ipsi nunc Lorem markdownum supplex. Care ferre nos praemia detestatur…",
"timeToRead": 2,
"frontmatter": {
"title": "Random project 4 With Super Long Title Phase One",
"tags": [
"say hi"
],
"cover": "https://unsplash.it/1152/300/?random?SuperLong",
"date": "02/03/2017",
"category": "random",
"categoryslug": "random"
}
}
},
{
"node": {
"fields": {
"slug": "/angels-of-mist",
"date": "2001-03-19T15:00:00.000Z"
},
"excerpt": "Ab dicemur cura Mane oscula anxia Lorem markdownum alius, non voluntas supremaque : canes ager cingere quis;\nrerum? Nunc nec ferunt verbis…",
"timeToRead": 2,
"frontmatter": {
"title": "Angels of Mist",
"tags": [
"cheese",
"other"
],
"cover": "https://unsplash.it/400/300/?random?AngelsofMist",
"date": "01/03/2017",
"category": "test3",
"categoryslug": "test3"
}
}
},
{
"node": {
"fields": {
"slug": "/big-sample-test",
"date": "2001-03-19T15:00:00.000Z"
},
"excerpt": "NOTE: This \"post\" is based on Markdown Cheatsheet and is meant to test styling of Markdown generated documents. This is intended as a…",
"timeToRead": 8,
"frontmatter": {
"title": "Big Test",
"tags": [
"test",
"huge"
],
"cover": "https://unsplash.it/400/300/?random?BigTest",
"date": "01/03/2018",
"category": "moar",
"categoryslug": "moar"
}
}
},
{
"node": {
"fields": {
"slug": "/birch-in-the-roses",
"date": "2001-03-19T15:00:00.000Z"
},
"excerpt": "Domos primus caelum taedia Accipit alto fecerat mutato centauri haerent dominoque Sicyonius color Publica animalia suoque sub Stupet eiusdem…",
"timeToRead": 2,
"frontmatter": {
"title": "Birch in the Roses",
"tags": [
"tag"
],
"cover": "../static/4b00837366fb63a52fb41969a89d6676/ec749/sutaba-1.jpg",
"date": "01/03/2017",
"category": "tech",
"categoryslug": "tech"
}
}
},
{
"node": {
"fields": {
"slug": "/the-fallen-time",
"date": "2001-02-19T15:00:00.000Z"
},
"excerpt": "Autolyci eminus retenta Hoc domum solitos veteremque nostrum Lorem markdownum huc suo ara, dubites celeri mihi bicolor. Secuti non? Suo opus…",
"timeToRead": 2,
"frontmatter": {
"title": "The Fallen Time",
"tags": [
"test",
"something",
"tagging"
],
"cover": "https://unsplash.it/400/300/?random?TheFallenTime",
"date": "01/02/2017",
"category": "another one",
"categoryslug": "anotherone"
}
}
},
{
"node": {
"fields": {
"slug": "/bold-mage",
"date": "2001-01-19T15:00:00.000Z"
},
"excerpt": "Quanto et ius coniunctis urbes Sedisti civiliter Lorem markdownum Ixione palus semper peritura barbaque in aureus\nobliquum erigitur…",
"timeToRead": 2,
"frontmatter": {
"title": "Bold Mage",
"tags": [
"programming",
"stuff",
"other"
],
"cover": "https://unsplash.it/400/300/?random?BoldMage",
"date": "01/01/2017",
"category": "tech",
"categoryslug": "tech"
}
}
}
]
}
}
}

[jun68ykt]

JSONのサンプル提示、ありがとうございます。categoryプロパティは文字列なので、私の回答のコードでそのままいけると思います。

Answer 1

こんにちは。

質問への追記・修正依頼のほうから、 this.props.postEdges のサンプル追記をお願いしており、その回答をまだ頂いていないので、はっきりしたことは言えませんが、render() で postList を作るところを、以下のように修正してみるといかがでしょうか？ （以下、map や filter に渡す関数をアロー関数にしています）

修正前

const postList = this.getPostList().filter(function (category, index, self) {
    return self.indexOf(category) === index;
});

修正後

const postListAll = this.getPostList();

const categoriesAll = postListAll.map(post => post.category);

const postList = postListAll.filter((post, index) => 
    categoriesAll.indexOf(post.category) === index
);

上記の修正後のロジックを試行するためのサンプルを作成しました。

• 上記のロジックを試すサンプル： https://jsfiddle.net/jun68ykt/7dLjemp9/23/

ただしこのサンプルでは、this.getPostList() の返す配列の要素は、

 { category: 'a',  categoryslug: 'aaa' }

という形式のもの、つまり、category とcategoryslug はともに文字列であると仮定しています。その点が実際とは異なるかもしれないのでご了承ください。

　　

上記のように修正してもうまくいかなかった場合、 props で渡されてくる this.props.postEdges がどのようなものなのかを知りたいので、ご質問に、 this.props.postEdgesのサンプルを追記して頂ければと思います。

以上参考になれば幸いです。

追記

別案を挙げます。以下でもいけるのでは？と思います。

const postList = this.getPostList().reduce((list, post) => {
  const categories = list.map(e => e.category);
  if (!categories.includes(post.category)) {
    list.push(post);
  }
  return list;
}, []);

• 上記のロジックを試すサンプル： https://jsfiddle.net/jun68ykt/7dLjemp9/29/

追記2

BAありがとうございます。
上記で追記した reduce を使ったコードは、 some とスプレッド構文を使うことにより、以下のようにさらに短くできました。

const postList = this.getPostList().reduce((list, post) => 
  list.some(e => e.category === post.category) ? list : [...list, post], []
);

• 上記のロジックを試すサンプル： https://jsfiddle.net/jun68ykt/7dLjemp9/47/

追記3

何度も追記してすみません。蛇足ながら、このコンポーネント Category は

カテゴリー一覧を表示するコンポーネント

とのことなので、 this.getPostList() から、重複のない、category の配列を得ることができればよいので、以下でもよいのではと思いました。

const categories = [...new Set(this.getPostList().map(e => e.category))];

• 上記のロジックを試すサンプル： https://jsfiddle.net/jun68ykt/7dLjemp9/50/

上記で、要素に重複のない配列 categories が得られるので、これを使って

<div className="grid">
  {categories.map(category => (
    <div className="item">
      <p>{category}</p>
    </div>
   ))}
</div>

としてもよいかもしれません。

Comments

[1042limit]

お世話になります。
ご指摘の通り、文字列がthis.props.postEdgesには文字列が入っておりました。無事動きました。複数のサンプルコードを提示していただき大変勉強になりました。ありがとうございました。

[jun68ykt]

どういたしまして。
> 無事動きました。
とのことでよかったです????

Answer 2

既にカテゴリがpostListに入っていた場合、postList.pushする前にreturnしてしまうとか…？