teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問stateで管理している配列要素の追加と削除の方法を知りたい

編集履歴

質問編集履歴

2

タイトル編集

2020/08/09 16:43

投稿

tomaa
tomaa

スコア84

test CHANGED
@@ -1 +1 @@
1
- stateで管理している配列要素の追加と削除の方法
1
+ stateで管理している配列要素の追加と削除の方法を知りたい
test CHANGED
File without changes

1

内容編集

2020/08/09 16:43

投稿

tomaa
tomaa

スコア84

test CHANGED
File without changes
test CHANGED
@@ -10,13 +10,25 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+ `const [name, setName] = useState([]);`
16
+
17
+ と宣言した場合、
18
+
19
+ `setName`を使って、追加、削除したほうが良いと思うのですが、どのようにすればよいかわかりません。
20
+
21
+
22
+
13
23
  例えば、
14
24
 
15
- `const [stateArray, setStateArray] = useState([]);`
25
+ `const [name, setName] = useState([""]);`
16
-
26
+
17
- と宣言した場合、
27
+ というように初期値を設定してから、
18
-
28
+
19
- `setStateArray`を使って、追加、削除したほうが良いと思うのですが、どのようにすればよいかわかりません。
29
+ `setName(name.push(""));`
30
+
31
+ と行うと、配列の要素が増えずになぜか「２」が値として入ります。
20
32
 
21
33
 
22
34
 
@@ -28,84 +40,246 @@
28
40
 
29
41
 
30
42
 
43
+ ### 今質問の背景
44
+
45
+
46
+
47
+ もともと、連想配列でテキストの入力を含むコンポーネントの追加、削除を行う予定でした。
48
+
49
+
50
+
51
+ しかし、下記の画像のような削除の仕方をしたい時に、通常の配列（[]）を利用したほうが、コードを作りやすいと思い現在改良をしています。
52
+
53
+ ![イメージ説明](936fe664238f5122702765b0da181440.png)
54
+
55
+
56
+
57
+
58
+
59
+
60
+
31
- ### 発生している問題・エラーメッセージ
61
+ ### 該当のソースコード
62
+
32
-
63
+ 連想配列を利用した場合のコード
64
+
33
-
65
+ ```JS
34
-
66
+
35
- `stateArray.push("test");`
67
+ import React, { useState } from "react";
68
+
36
-
69
+ import { View, Button, Text, TextInput } from "react-native";
70
+
71
+
72
+
73
+ function Item({ setText, handleAdd, i }) {
74
+
75
+ return (
76
+
77
+ <View>
78
+
79
+ <TextInput
80
+
81
+ style={{ borderWidth: 1 }}
82
+
83
+ onChange={(e) => {
84
+
85
+ setText(i, e.nativeEvent.text);
86
+
87
+ }}
88
+
89
+ ></TextInput>
90
+
91
+ <Button
92
+
37
- とした場合は、下記のエラーが発生します。
93
+ title="追加"
94
+
95
+ onPress={() => {
96
+
97
+ handleAdd();
98
+
99
+ }}
100
+
101
+ ></Button>
102
+
103
+ </View>
104
+
105
+ );
106
+
107
+ }
108
+
109
+
110
+
111
+ export default function TestStateArray() {
112
+
113
+ const [count, setCount] = useState(1);
114
+
115
+ const [name, setName] = useState({});
116
+
117
+
118
+
119
+ function handleAdd() {
120
+
121
+ setCount((v) => v + 1);
122
+
123
+ }
124
+
125
+ return (
126
+
127
+ <View>
128
+
129
+ <Text>確認{JSON.stringify(name)}</Text>
130
+
131
+ {Array.from({ length: count }, (_, i) => (
132
+
133
+ <Item
134
+
135
+ handleAdd={handleAdd}
136
+
137
+ setText={(i, text) => setName((prev) => ({ ...prev, [i]: text }))}
138
+
139
+ key={i}
140
+
141
+ i={i}
142
+
143
+ />
144
+
145
+ ))}
146
+
147
+ </View>
148
+
149
+ );
150
+
151
+ }
38
152
 
39
153
 
40
154
 
41
155
  ```
42
156
 
157
+
158
+
159
+ 通常の配列でのコード
160
+
161
+ ```JS
162
+
163
+ import React, { useState, useEffect } from "react";
164
+
43
- TypeError: undefined is not an object (evaluating 'stateArray.push')
165
+ import { View, Text, Button, TextInput } from "react-native";
166
+
167
+
168
+
169
+ function Item({ setName, handleAdd, handleDelete, index }) {
170
+
171
+ return (
172
+
173
+ <View>
174
+
175
+ <TextInput
176
+
177
+ style={{ borderWidth: 1 }}
178
+
179
+ onChange={(e) => {
180
+
181
+ setName(e.nativeEvent.text);
182
+
183
+ }}
184
+
185
+ ></TextInput>
186
+
187
+ <Button
188
+
189
+ title="追加"
190
+
191
+ onPress={() => {
192
+
193
+ handleAdd();
194
+
195
+ }}
196
+
197
+ />
198
+
199
+ <Button
200
+
201
+ title="削除"
202
+
203
+ onPress={() => {
204
+
205
+ handleDelete(index);
206
+
207
+ }}
208
+
209
+ />
210
+
211
+ </View>
212
+
213
+ );
214
+
215
+ }
216
+
217
+
218
+
219
+ export default function TestStateArray() {
220
+
221
+ const [count, setCount] = useState(1);
222
+
223
+ const [name, setName] = useState([""]);
224
+
225
+
226
+
227
+ function handleAdd() {
228
+
229
+ setCount((v) => v + 1);
230
+
231
+ setName(name.push(""));
232
+
233
+ }
234
+
235
+ function handleDelete(index) {
236
+
237
+ setCount((v) => v - 1);
238
+
239
+ setName(name.splice(index, 1));
240
+
241
+ }
242
+
243
+ console.log(name);
244
+
245
+ return (
246
+
247
+ <View>
248
+
249
+ <Text>確認{JSON.stringify(name)}</Text>
250
+
251
+
252
+
253
+ {Array.from({ length: count }, (_, i) => (
254
+
255
+ <Item
256
+
257
+ name={name}
258
+
259
+ setName={setName}
260
+
261
+ handleAdd={handleAdd}
262
+
263
+ handleDelete={handleDelete}
264
+
265
+ key={i}
266
+
267
+ index={i}
268
+
269
+ />
270
+
271
+ ))}
272
+
273
+ </View>
274
+
275
+ );
276
+
277
+ }
44
278
 
45
279
  ```
46
280
 
47
281
 
48
282
 
49
-
50
-
51
- ### 該当のソースコード
52
-
53
- こちらのコードで試しています。
54
-
55
-
56
-
57
- ```ここに言語名を入力
58
-
59
- import React, { useState } from "react";
60
-
61
- import { View, Button } from "react-native";
62
-
63
-
64
-
65
- export default function TestStateArray() {
66
-
67
- const [stateArray, setStateArray] = useState([]);
68
-
69
-
70
-
71
- function handleAdd() {
72
-
73
- stateArray.push("test");
74
-
75
- console.log(stateArray);
76
-
77
- }
78
-
79
- return (
80
-
81
- <View>
82
-
83
- <Button
84
-
85
- title="追加"
86
-
87
- onPress={() => {
88
-
89
- handleAdd();
90
-
91
- }}
92
-
93
- />
94
-
95
- </View>
96
-
97
- );
98
-
99
- }
100
-
101
- ```
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
283
  ### 補足情報（FW/ツールのバージョンなど）
110
284
 
111
285