お世話になります。
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;
こんにちは。 this.props.postEdges で渡されてくる配列の各要素がどのような構造になっているのかを知りたいので、postEdges のサンプルを質問に追記して頂ければと思います。
お世話になります。
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"
}
}
}
]
}
}
}
JSONのサンプル提示、ありがとうございます。categoryプロパティは文字列なので、私の回答のコードでそのままいけると思います。

回答2件
あなたの回答
tips
プレビュー