質問編集履歴
5
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,14 +1,41 @@
|
|
|
1
1
|
React,Reduxでアプリを作っているのですが、stateのlistが上手く更新できません
|
|
2
2
|
[先日の質問](https://teratail.com/questions/98157)を参考にして、入れ子のリストを使ったreducerを実装しています。
|
|
3
3
|
|
|
4
|
+
# なにがしたいのか
|
|
5
|
+
上述のページで質問したことも踏まえて、
|
|
6
|
+
「入れ子リストのstateをreduxを用いて実装し、そこにリストを追加する」です。
|
|
7
|
+
|
|
4
8
|
# 実装したいものの概要
|
|
5
|
-
質問を投稿できる簡単なサービスです。
|
|
6
|
-
DBサーバーに質問があり、componentDidMount()で通信し、データを読み込み描画します。
|
|
7
|
-
また、質問を投稿することでサーバーにデータが送られ、
|
|
8
|
-
|
|
9
|
+
まず、2次元配列のような入れ子のリストのstateを用意します。
|
|
10
|
+
```
|
|
11
|
+
questionList:[
|
|
12
|
+
['title1','message1'],
|
|
13
|
+
['title2','message2'],
|
|
14
|
+
['title3','message3'],
|
|
15
|
+
['title4','message4'],
|
|
16
|
+
['title5','message5'],
|
|
17
|
+
]
|
|
18
|
+
```
|
|
19
|
+
ユーザーがボタンを押したタイミングでここに新たな[title6,message6]を追加したいのです。
|
|
9
20
|
|
|
21
|
+
```
|
|
22
|
+
questionList:[
|
|
23
|
+
['title1','message1'],
|
|
24
|
+
['title2','message2'],
|
|
25
|
+
['title3','message3'],
|
|
26
|
+
['title4','message4'],
|
|
27
|
+
['title5','message5'],
|
|
28
|
+
['title6','message6'],
|
|
29
|
+
]
|
|
30
|
+
```
|
|
10
31
|
|
|
11
32
|
|
|
33
|
+
しかし、ここでただ単に追加するだけなのであれば、以下のコードで実現します。
|
|
34
|
+
しかし、ここでは
|
|
35
|
+
ボタン押す→サーバーに追加→サーバーから全データを取得→描画
|
|
36
|
+
としたいので、以下のコードでは問題が起こります。
|
|
37
|
+
|
|
38
|
+
|
|
12
39
|
# 問題が生じているコード
|
|
13
40
|
```javascript
|
|
14
41
|
import * as actionTypes from "../actionTypes"
|
|
@@ -69,49 +96,51 @@
|
|
|
69
96
|
export default questionListsReducer
|
|
70
97
|
```
|
|
71
98
|
|
|
72
|
-
#
|
|
99
|
+
# どんな問題が起こるか
|
|
73
|
-
stateのlistのtitleの中身を例えば、
|
|
74
|
-
初期
|
|
100
|
+
今初期値としてサーバー内に５つのデータ、仮にそのtitleがa,b,c,d,eという文字列だとすると、
|
|
75
|
-
`f`というタイトルの質問を投稿したあとに、`a,b,c,d,e,f`に更新したい。
|
|
76
101
|
|
|
77
|
-
|
|
102
|
+
初期値は以下のようになっているとします。
|
|
103
|
+
```
|
|
104
|
+
[
|
|
105
|
+
['a','message1'],
|
|
106
|
+
['b','message2'],
|
|
78
|
-
|
|
107
|
+
['c','message3'],
|
|
79
|
-
|
|
108
|
+
['d','message4'],
|
|
109
|
+
['e','message5'],
|
|
110
|
+
]
|
|
111
|
+
```
|
|
80
112
|
|
|
81
|
-
というのも、上のコードを実行した時、
|
|
82
|
-
|
|
113
|
+
ここで、ボタンを押し、サーバーに1つ新しいデータfを送り、全データを取得すると、
|
|
83
|
-
`
|
|
114
|
+
```
|
|
115
|
+
[
|
|
116
|
+
['a','message1'],
|
|
117
|
+
['b','message2'],
|
|
84
|
-
|
|
118
|
+
['c','message3'],
|
|
119
|
+
['d','message4'],
|
|
120
|
+
['e','message5'],
|
|
121
|
+
['a','message1'],
|
|
122
|
+
['b','message2'],
|
|
123
|
+
['c','message3'],
|
|
124
|
+
['d','message4'],
|
|
125
|
+
['e','message5'],
|
|
126
|
+
['f','message5'],
|
|
127
|
+
]
|
|
85
128
|
|
|
86
|
-
ここに、新たに「質問」を投稿してDBサーバーにデータを1つ追加し、6つになった後は、
|
|
87
|
-
`
|
|
129
|
+
```
|
|
88
|
-
`22`
|
|
89
|
-
`22`
|
|
90
|
-
と
|
|
130
|
+
という風に追加されてしまいます。
|
|
91
131
|
|
|
92
|
-
questionListの中身が具体的にどのように更新されているかというと、DBのデータが
|
|
93
|
-
`a,b,c,d,e`で`f`を追加しようとした時、
|
|
94
|
-
`a,b,c,d,e,null,null,null,null,null`←とちゅう
|
|
95
|
-
`a,b,c,d,e,a,b,c,d,e,a,b,c,d,e,f,a,b,c,d,e,f`←最終
|
|
96
|
-
|
|
132
|
+
これを、
|
|
97
|
-
|
|
98
|
-
なので、どこが問題なのかというと、
|
|
99
|
-
viewに表示するときはサーバーからデータの個数を取得し、
|
|
100
|
-
```javascript
|
|
101
|
-
for(let = i; i<length; i++){
|
|
102
|
-
questionList[i].title
|
|
103
|
-
}
|
|
104
133
|
```
|
|
134
|
+
[
|
|
135
|
+
['a','message1'],
|
|
136
|
+
['b','message2'],
|
|
137
|
+
['c','message3'],
|
|
138
|
+
['d','message4'],
|
|
139
|
+
['e','message5'],
|
|
140
|
+
['f','message5'],
|
|
141
|
+
]
|
|
142
|
+
```
|
|
105
|
-
|
|
143
|
+
という風に更新したいです。
|
|
106
144
|
|
|
107
|
-
ですので、投稿後はi=1~6となり全てのデータ表示されるはずですが、
|
|
108
|
-
listの中身は、
|
|
109
|
-
`a,b,c,d,e,a,b,c,d,e,a,b,c,d,e,f,a,b,c,d,e,f`
|
|
110
|
-
のようになっているので、
|
|
111
|
-
`a,b,c,d,e,a`と表示されてしまいます。
|
|
112
145
|
|
|
113
|
-
これが、「Reducerの本来的なstate更新のカタチです」と言われれば、
|
|
114
|
-
`i`の部分を修正しようと思いますが、
|
|
115
|
-
reducerについてよく理解していないので、これが合っているのか間違っているのかもわかりません。
|
|
116
|
-
|
|
117
146
|
よろしくお願いします。
|
4
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
`5`
|
|
84
84
|
と、consoleに表示されます。
|
|
85
85
|
|
|
86
|
-
ここに、新たに「質問」を投稿してDBサーバーにデータを1つ追加し、
|
|
86
|
+
ここに、新たに「質問」を投稿してDBサーバーにデータを1つ追加し、6つになった後は、
|
|
87
87
|
`10`
|
|
88
88
|
`22`
|
|
89
89
|
`22`
|
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
questionListの中身が具体的にどのように更新されているかというと、DBのデータが
|
|
93
93
|
`a,b,c,d,e`で`f`を追加しようとした時、
|
|
94
|
-
`a,b,c,d,e,null`←とちゅう
|
|
94
|
+
`a,b,c,d,e,null,null,null,null,null`←とちゅう
|
|
95
95
|
`a,b,c,d,e,a,b,c,d,e,a,b,c,d,e,f,a,b,c,d,e,f`←最終
|
|
96
96
|
という風に更新されます。
|
|
97
97
|
|
2
加筆
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
```
|
|
71
71
|
|
|
72
72
|
# 実現したいこと
|
|
73
|
-
stateを
|
|
73
|
+
stateのlistのtitleの中身を例えば、
|
|
74
|
-
`a,b,c,d,e`
|
|
74
|
+
初期読み込み時にサーバーから取得した時に`a,b,c,d,e`と更新されたとして、
|
|
75
|
-
`a,b,c,d,e,f`に
|
|
75
|
+
`f`というタイトルの質問を投稿したあとに、`a,b,c,d,e,f`に更新したい。
|
|
76
76
|
|
|
77
77
|
# よくわかっていないこと
|
|
78
78
|
Reducerのロジックについて全然理解していないのですが、
|
1
加筆
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
React,Reduxでアプリを作っているのですが、stateのlistが上手く更新できません
|
|
2
|
-
https://teratail.com/questions/98157
|
|
2
|
+
[先日の質問](https://teratail.com/questions/98157)を参考にして、入れ子のリストを使ったreducerを実装しています。
|
|
3
3
|
|
|
4
4
|
# 実装したいものの概要
|
|
5
5
|
質問を投稿できる簡単なサービスです。
|
|
6
|
+
DBサーバーに質問があり、componentDidMount()で通信し、データを読み込み描画します。
|
|
6
|
-
|
|
7
|
+
また、質問を投稿することでサーバーにデータが送られ、
|
|
7
8
|
投稿後、サーバーから質問リストを取得し、描画します。
|
|
8
9
|
|
|
9
10
|
|