回答編集履歴
9
テキスト修正
test
CHANGED
@@ -131,3 +131,55 @@
|
|
131
131
|
```
|
132
132
|
|
133
133
|
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/47/](https://jsfiddle.net/jun68ykt/7dLjemp9/47/)
|
134
|
+
|
135
|
+
|
136
|
+
|
137
|
+
### 追記3
|
138
|
+
|
139
|
+
|
140
|
+
|
141
|
+
何度も追記してすみません。蛇足ながら、このコンポーネント `Category` は
|
142
|
+
|
143
|
+
> カテゴリー一覧を表示するコンポーネント
|
144
|
+
|
145
|
+
|
146
|
+
|
147
|
+
とのことなので、 `this.getPostList()` から、重複のない、category の配列を得ることができればよいので、以下でもよいのではと思いました。
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
```javascript
|
152
|
+
|
153
|
+
const categories = [...new Set(this.getPostList().map(e => e.category))];
|
154
|
+
|
155
|
+
```
|
156
|
+
|
157
|
+
|
158
|
+
|
159
|
+
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/50/](https://jsfiddle.net/jun68ykt/7dLjemp9/50/)
|
160
|
+
|
161
|
+
|
162
|
+
|
163
|
+
上記で、要素に重複のない配列 `categories` が得られるので、これを使って
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
```JSX
|
168
|
+
|
169
|
+
<div className="grid">
|
170
|
+
|
171
|
+
{categories.map(category => (
|
172
|
+
|
173
|
+
<div className="item">
|
174
|
+
|
175
|
+
<p>{category}</p>
|
176
|
+
|
177
|
+
</div>
|
178
|
+
|
179
|
+
))}
|
180
|
+
|
181
|
+
</div>
|
182
|
+
|
183
|
+
```
|
184
|
+
|
185
|
+
としてもよいかもしれません。
|
8
テキスト修正
test
CHANGED
@@ -107,3 +107,27 @@
|
|
107
107
|
|
108
108
|
|
109
109
|
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/29/](https://jsfiddle.net/jun68ykt/7dLjemp9/29/)
|
110
|
+
|
111
|
+
|
112
|
+
|
113
|
+
### 追記2
|
114
|
+
|
115
|
+
|
116
|
+
|
117
|
+
BAありがとうございます。
|
118
|
+
|
119
|
+
上記で追記した `reduce` を使ったコードは、 `some` とスプレッド構文を使うことにより、以下のようにさらに短くできました。
|
120
|
+
|
121
|
+
|
122
|
+
|
123
|
+
```javascript
|
124
|
+
|
125
|
+
const postList = this.getPostList().reduce((list, post) =>
|
126
|
+
|
127
|
+
list.some(e => e.category === post.category) ? list : [...list, post], []
|
128
|
+
|
129
|
+
);
|
130
|
+
|
131
|
+
```
|
132
|
+
|
133
|
+
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/47/](https://jsfiddle.net/jun68ykt/7dLjemp9/47/)
|
7
テキスト修正
test
CHANGED
@@ -106,4 +106,4 @@
|
|
106
106
|
|
107
107
|
|
108
108
|
|
109
|
-
- *上記のロジックを試すサンプル:* [https://jsfiddle.net/jun68ykt/7dLjemp9/29/](https://jsfiddle.net/jun68ykt/7dLjemp9/29/)
|
109
|
+
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/29/](https://jsfiddle.net/jun68ykt/7dLjemp9/29/)
|
6
テキスト修正
test
CHANGED
@@ -75,3 +75,35 @@
|
|
75
75
|
|
76
76
|
|
77
77
|
以上参考になれば幸いです。
|
78
|
+
|
79
|
+
|
80
|
+
|
81
|
+
### 追記
|
82
|
+
|
83
|
+
|
84
|
+
|
85
|
+
別案を挙げます。以下でもいけるのでは?と思います。
|
86
|
+
|
87
|
+
|
88
|
+
|
89
|
+
```javascript
|
90
|
+
|
91
|
+
const postList = this.getPostList().reduce((list, post) => {
|
92
|
+
|
93
|
+
const categories = list.map(e => e.category);
|
94
|
+
|
95
|
+
if (!categories.includes(post.category)) {
|
96
|
+
|
97
|
+
list.push(post);
|
98
|
+
|
99
|
+
}
|
100
|
+
|
101
|
+
return list;
|
102
|
+
|
103
|
+
}, []);
|
104
|
+
|
105
|
+
```
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
- *上記のロジックを試すサンプル:* [https://jsfiddle.net/jun68ykt/7dLjemp9/29/](https://jsfiddle.net/jun68ykt/7dLjemp9/29/)
|
5
テキスト修正
test
CHANGED
@@ -48,7 +48,7 @@
|
|
48
48
|
|
49
49
|
|
50
50
|
|
51
|
-
このサンプルでは、`this.getPostList()` の返す配列の要素は、
|
51
|
+
ただしこのサンプルでは、`this.getPostList()` の返す配列の要素は、
|
52
52
|
|
53
53
|
```javascript
|
54
54
|
|
@@ -60,9 +60,9 @@
|
|
60
60
|
|
61
61
|
|
62
62
|
|
63
|
+
|
63
64
|
|
64
65
|
|
65
|
-
|
66
66
|
|
67
67
|
|
68
68
|
|
4
テキスト修正
test
CHANGED
@@ -56,7 +56,7 @@
|
|
56
56
|
|
57
57
|
```
|
58
58
|
|
59
|
-
という形式のもの、つまり、`category` と`categoryslug` はともに文字列であると仮定しています。その点が実際とは異なるかもしれないので
|
59
|
+
という形式のもの、つまり、`category` と`categoryslug` はともに文字列であると仮定しています。その点が実際とは異なるかもしれないのでご了承ください。
|
60
60
|
|
61
61
|
|
62
62
|
|
3
テキスト修正
test
CHANGED
@@ -40,21 +40,37 @@
|
|
40
40
|
|
41
41
|
|
42
42
|
|
43
|
-
上記の修正後のロジックを試行するためのサンプルを作成しました。
|
43
|
+
上記の修正後のロジックを試行するためのサンプルを作成しました。
|
44
44
|
|
45
45
|
|
46
46
|
|
47
47
|
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/23/](https://jsfiddle.net/jun68ykt/7dLjemp9/23/)
|
48
48
|
|
49
|
-
|
50
49
|
|
50
|
+
|
51
|
-
|
51
|
+
このサンプルでは、`this.getPostList()` の返す配列の要素は、
|
52
|
+
|
53
|
+
```javascript
|
54
|
+
|
55
|
+
{ category: 'a', categoryslug: 'aaa' }
|
56
|
+
|
57
|
+
```
|
58
|
+
|
59
|
+
という形式のもの、つまり、`category` と`categoryslug` はともに文字列であると仮定しています。その点が実際とは異なるかもしれないのでその点はご了承ください。
|
52
60
|
|
53
61
|
|
54
62
|
|
55
63
|
|
56
64
|
|
65
|
+
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
|
70
|
+
|
71
|
+
|
72
|
+
|
57
|
-
上記の修正
|
73
|
+
上記のように修正してもうまくいかなかった場合、 props で渡されてくる `this.props.postEdges` がどのようなものなのかを知りたいので、ご質問に、 `this.props.postEdges`のサンプルを追記して頂ければと思います。
|
58
74
|
|
59
75
|
|
60
76
|
|
2
テキスト修正
test
CHANGED
@@ -40,9 +40,21 @@
|
|
40
40
|
|
41
41
|
|
42
42
|
|
43
|
-
上記
|
43
|
+
上記の修正後のロジックを試行するためのサンプルを作成しました。以下は、`category` プロパティは文字列であると仮定していますので、その点が実際とは異なるかもしれません。
|
44
44
|
|
45
45
|
|
46
|
+
|
47
|
+
- **上記のロジックを試すサンプル:** [https://jsfiddle.net/jun68ykt/7dLjemp9/23/](https://jsfiddle.net/jun68ykt/7dLjemp9/23/)
|
48
|
+
|
49
|
+
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
|
56
|
+
|
57
|
+
上記の修正でもうまくいかなかった場合、 props で渡されてくる `this.props.postEdges` がどのようなものなのかを知りたいので、ご質問に、 `this.props.postEdges`のサンプルを追記して頂きたいです。
|
46
58
|
|
47
59
|
|
48
60
|
|
1
テキスト修正
test
CHANGED
@@ -22,13 +22,17 @@
|
|
22
22
|
|
23
23
|
```javascript
|
24
24
|
|
25
|
-
const
|
25
|
+
const postListAll = this.getPostList();
|
26
26
|
|
27
27
|
|
28
28
|
|
29
|
-
const
|
29
|
+
const categoriesAll = postListAll.map(post => post.category);
|
30
30
|
|
31
|
+
|
32
|
+
|
33
|
+
const postList = postListAll.filter((post, index) =>
|
34
|
+
|
31
|
-
categories.indexOf(post.category) === index
|
35
|
+
categoriesAll.indexOf(post.category) === index
|
32
36
|
|
33
37
|
);
|
34
38
|
|