teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ReduxのReducerのリストの更新が上手くいきません

編集履歴

質問編集履歴

5

修正

2018/03/25 11:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,17 +4,71 @@
4
4
 
5
5
 
6
6
 
7
+ # なにがしたいのか
8
+
9
+ 上述のページで質問したことも踏まえて、
10
+
11
+ 「入れ子リストのstateをreduxを用いて実装し、そこにリストを追加する」です。
12
+
13
+
14
+
7
15
  # 実装したいものの概要
8
16
 
9
- 質問を投稿できる簡単なサービスです。
17
+ まず、2次元配列のような入れ子のリストのstateを用意します。
18
+
10
-
19
+ ```
20
+
21
+ questionList:[
22
+
23
+ ['title1','message1'],
24
+
25
+ ['title2','message2'],
26
+
27
+ ['title3','message3'],
28
+
29
+ ['title4','message4'],
30
+
31
+ ['title5','message5'],
32
+
33
+ ]
34
+
35
+ ```
36
+
11
- DBサーバーに質問があり、componentDidMount()で通信し、データを読み込み描画します。
37
+ ユーザーがボタンを押したタイミングでここに新たな[title6,message6]を追加したいのです。
38
+
39
+
40
+
12
-
41
+ ```
42
+
43
+ questionList:[
44
+
45
+ ['title1','message1'],
46
+
47
+ ['title2','message2'],
48
+
49
+ ['title3','message3'],
50
+
51
+ ['title4','message4'],
52
+
53
+ ['title5','message5'],
54
+
55
+ ['title6','message6'],
56
+
57
+ ]
58
+
59
+ ```
60
+
61
+
62
+
63
+
64
+
65
+ しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
66
+
67
+ しかし、ここでは
68
+
13
- また、質問を投稿することでサーバーにデータが送られ、
69
+ ボタン押す→サーバーに追加→サーバーから全データを取得→描画
14
-
70
+
15
- 投稿後、サーバーから質問リストを取得し、描画します。
71
+ としたいので、以下のコードでは問題が起こります。
16
-
17
-
18
72
 
19
73
 
20
74
 
@@ -140,93 +194,97 @@
140
194
 
141
195
 
142
196
 
143
- # 実現したいこと
144
-
145
- stateのlistのtitleの中身を例えば、
146
-
147
- 初期読み込み時にサーバーから取得した時に`a,b,c,d,e`と更新されたとして、
148
-
149
- `f`というタイトルの質問を投稿したあとに、`a,b,c,d,e,f`に更新したい。
150
-
151
-
152
-
153
- # よくわかっていないこと
154
-
155
- Reducerのロジックについて全然理解していないのですが、
156
-
157
- Reducerを用いてstateを更新したときは、変更前の値にappendされているような形式になるのは一般的なのでしょうか。
158
-
159
-
160
-
161
- というのも、上のコードを実行した時、
162
-
163
- 初期読み込み後のquestionListのlengthを出力させると（DBサーバー内にデータ5つの時）、
164
-
165
- `5`
166
-
167
- と、consoleに表示されます。
168
-
169
-
170
-
171
- ここに、新たに「質問」を投稿してDBサーバーにデータを1つ追加し、6つになった後は、
172
-
173
- `10`
174
-
175
- `22`
176
-
177
- `22`
178
-
179
- と出力されます。（理想は`6`です）
180
-
181
-
182
-
183
- questionListの中身が具体的にどのように更新されているかというと、DBのデータが
184
-
185
- `a,b,c,d,e`で`f`を追加しようとした時、
186
-
187
- `a,b,c,d,e,null,null,null,null,null`←とちゅう
188
-
189
- `a,b,c,d,e,a,b,c,d,e,a,b,c,d,e,f,a,b,c,d,e,f`←最終
190
-
191
- という風に更新されます。
192
-
193
-
194
-
195
- なので、どこが問題なのかというと、
196
-
197
- viewに表示するときはサーバーからデータの個数を取得し、
198
-
199
- ```javascript
200
-
201
- for(let = i; i<length; i++){
202
-
203
- questionList[i].title
204
-
205
- }
206
-
207
- ```
208
-
209
- のようにしています。
210
-
211
-
212
-
213
- ですので、投稿後はi=1~6となり全てのデータ表示されるはずですが、
214
-
215
- listの中身は、
216
-
217
- `a,b,c,d,e,a,b,c,d,e,a,b,c,d,e,f,a,b,c,d,e,f`
218
-
219
- のようになっているので、
220
-
221
- `a,b,c,d,e,a`と表示されてしまいます。
222
-
223
-
224
-
225
- これが、「Reducerの本来的なstate更新のカタチです」と言われれば、
226
-
227
- `i`の部分を修正しようと思いますが、
228
-
229
- reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
197
+ # どんな問題が起こるか
198
+
199
+ 今初期値としてサーバー内に５つのデータ、仮にそのtitleがa,b,c,d,eという文字列だとすると、
200
+
201
+
202
+
203
+ 初期値は以下のようになっているとします。
204
+
205
+ ```
206
+
207
+ [
208
+
209
+ ['a','message1'],
210
+
211
+ ['b','message2'],
212
+
213
+ ['c','message3'],
214
+
215
+ ['d','message4'],
216
+
217
+ ['e','message5'],
218
+
219
+ ]
220
+
221
+ ```
222
+
223
+
224
+
225
+ ここで、ボタンを押し、サーバーに1つ新しいデータfを送り、全データを取得すると、
226
+
227
+ ```
228
+
229
+ [
230
+
231
+ ['a','message1'],
232
+
233
+ ['b','message2'],
234
+
235
+ ['c','message3'],
236
+
237
+ ['d','message4'],
238
+
239
+ ['e','message5'],
240
+
241
+ ['a','message1'],
242
+
243
+ ['b','message2'],
244
+
245
+ ['c','message3'],
246
+
247
+ ['d','message4'],
248
+
249
+ ['e','message5'],
250
+
251
+ ['f','message5'],
252
+
253
+ ]
254
+
255
+
256
+
257
+ ```
258
+
259
+ という風に追加されてしまいます。
260
+
261
+
262
+
263
+ これを、
264
+
265
+ ```
266
+
267
+ [
268
+
269
+ ['a','message1'],
270
+
271
+ ['b','message2'],
272
+
273
+ ['c','message3'],
274
+
275
+ ['d','message4'],
276
+
277
+ ['e','message5'],
278
+
279
+ ['f','message5'],
280
+
281
+ ]
282
+
283
+ ```
284
+
285
+ という風に更新したいです。
286
+
287
+
230
288
 
231
289
 
232
290
 

4

修正

2018/03/25 11:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -168,7 +168,7 @@
168
168
 
169
169
 
170
170
 
171
- ここに、新たに「質問」を投稿してDBサーバーにデータを1つ追加し、5つになった後は、
171
+ ここに、新たに「質問」を投稿してDBサーバーにデータを1つ追加し、6つになった後は、
172
172
 
173
173
  `10`
174
174
 

3

修正

2018/03/25 09:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -184,7 +184,7 @@
184
184
 
185
185
  `a,b,c,d,e`で`f`を追加しようとした時、
186
186
 
187
- `a,b,c,d,e,null`←とちゅう
187
+ `a,b,c,d,e,null,null,null,null,null`←とちゅう
188
188
 
189
189
  `a,b,c,d,e,a,b,c,d,e,a,b,c,d,e,f,a,b,c,d,e,f`←最終
190
190
 

2

加筆

2018/03/25 08:57

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -142,11 +142,11 @@
142
142
 
143
143
  # 実現したいこと
144
144
 
145
- stateを
145
+ stateのlistのtitleの中身を例えば、
146
-
146
+
147
- `a,b,c,d,e`から
147
+ 初期読み込み時にサーバーから取得した時に`a,b,c,d,e`と更新されたとして、
148
-
148
+
149
- `a,b,c,d,e,f`に変更したい。
149
+ `f`というタイトルの質問を投稿したあとに、`a,b,c,d,e,f`に更新したい。
150
150
 
151
151
 
152
152
 

1

加筆

2018/03/25 08:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  React,Reduxでアプリを作っているのですが、stateのlistが上手く更新できません
2
2
 
3
- https://teratail.com/questions/98157
3
+ [先日の質問](https://teratail.com/questions/98157)を参考にして、入れ子のリストを使ったreducerを実装しています。
4
4
 
5
5
 
6
6
 
@@ -8,7 +8,9 @@
8
8
 
9
9
  質問を投稿できる簡単なサービスです。
10
10
 
11
+ DBサーバーに質問があり、componentDidMount()で通信し、データを読み込み描画します。
12
+
11
- DBサーバーに質問があり、投稿することでサーバーにデータが送られ、
13
+ また、質問を投稿することでサーバーにデータが送られ、
12
14
 
13
15
  投稿後、サーバーから質問リストを取得し、描画します。
14
16