teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

6

コード修正

2021/11/13 16:41

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -39,7 +39,7 @@
39
39
  checked: false,
40
40
  }];
41
41
 
42
- const b_checked = update(data, 2);
42
+ const b_checked = update(data, 1);
43
43
 
44
44
  /*
45
45
  b_checked = [{

5

表現を修正

2021/11/13 16:41

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
  というわけで、これらを踏まえて考えてみると、以下のようになるのではないでしょうか。
56
56
 
57
- ご質問のコードやデータにタイポと思われる部分が多く、正しく読み取れているか自信が無いので、`parent_id`と`child_id`を指定して更新するパターンと、配列のインデックスを指定して更新するパターンを作ってみました。
57
+ `parent_id`と`child_id`を指定して更新するパターンと、配列のインデックスを指定して更新するパターンを作ってみました。
58
58
 
59
59
  ```js
60
60
  // parent_idとchild_idを指定して更新

4

表現を修正

2021/11/13 16:33

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -6,11 +6,11 @@
6
6
  arr.map((v, i) => i === index ? value : v);
7
7
  ```
8
8
 
9
- あるオブジェクトの特定の要素を更新する処理はスプレッド構文を使って以下のように書けます。
9
+ あるオブジェクトの特定のプロパティの値を更新する処理はスプレッド構文を使って以下のように書けます。
10
10
 
11
11
  ```js
12
12
  const updateId = (obj, newId) =>
13
- // スプレッド構文でオブジェクトの中身を展開し、キーが"id"の要素はnewIdにすることで更新する
13
+ // スプレッド構文でオブジェクトの中身を展開し、キーが"id"のプロパティの値はnewIdにすることで更新する
14
14
  ({ ...obj, id: newId });
15
15
  ```
16
16
 
@@ -18,7 +18,7 @@
18
18
 
19
19
  ```js
20
20
  const update = (obj, key, value) =>
21
- // スプレッド構文でオブジェクトの中身を展開し、キーがkeyの要素はvalueにすることで更新する
21
+ // スプレッド構文でオブジェクトの中身を展開し、キーがkeyのプロパティの値はvalueにすることで更新する
22
22
  ({ ...obj, [key]: value });
23
23
  ```
24
24
 

3

間違いを修正

2021/11/13 16:27

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -6,11 +6,11 @@
6
6
  arr.map((v, i) => i === index ? value : v);
7
7
  ```
8
8
 
9
- あるオブジェクトの特定の要素を更新する処理は以下のように書けます。
9
+ あるオブジェクトの特定の要素を更新する処理はスプレッド構文を使って以下のように書けます。
10
10
 
11
11
  ```js
12
12
  const updateId = (obj, newId) =>
13
- // スプレッド演算子でオブジェクトの中身を展開し、キーが"id"の要素はnewIdにすることで更新する
13
+ // スプレッド構文でオブジェクトの中身を展開し、キーが"id"の要素はnewIdにすることで更新する
14
14
  ({ ...obj, id: newId });
15
15
  ```
16
16
 
@@ -18,7 +18,7 @@
18
18
 
19
19
  ```js
20
20
  const update = (obj, key, value) =>
21
- // スプレッド演算子でオブジェクトの中身を展開し、キーがkeyの要素はvalueにすることで更新する
21
+ // スプレッド構文でオブジェクトの中身を展開し、キーがkeyの要素はvalueにすることで更新する
22
22
  ({ ...obj, [key]: value });
23
23
  ```
24
24
 

2

例を追加

2021/11/13 15:59

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -25,14 +25,35 @@
25
25
  よって、配列の中の`i`番目のオブジェクトの`checked`プロパティを更新する処理はこう書きます。
26
26
 
27
27
  ```js
28
- const update = (arr, index, value) =>
28
+ const update = (arr, index, value = true) =>
29
29
  arr.map((item, i) => ({
30
30
  ...item,
31
31
  checked: (i === index) ? value : item.checked,
32
32
  }));
33
+
34
+ const data = [{
35
+ id: "a",
36
+ checked: false,
37
+ }, {
38
+ id: "b",
39
+ checked: false,
40
+ }];
41
+
42
+ const b_checked = update(data, 2);
43
+
44
+ /*
45
+ b_checked = [{
46
+ id: "a",
47
+ checked: false,
48
+ }, {
49
+ id: "b",
50
+ checked: true, // 2番目のオブジェクトのcheckedプロパティが更新される
51
+ }];
52
+ */
33
53
  ```
34
54
 
35
- というわけで、これらを踏まえて考えてみると、こんな感じになるのではないでしょうか。
55
+ というわけで、これらを踏まえて考えてみると、以下のようになるのではないでしょうか。
56
+
36
57
  ご質問のコードやデータにタイポと思われる部分が多く、正しく読み取れているか自信が無いので、`parent_id`と`child_id`を指定して更新するパターンと、配列のインデックスを指定して更新するパターンを作ってみました。
37
58
 
38
59
  ```js

1

説明を追記

2021/11/13 15:57

投稿

fj68
fj68

スコア752

answer CHANGED
@@ -22,7 +22,17 @@
22
22
  ({ ...obj, [key]: value });
23
23
  ```
24
24
 
25
+ よって、配列の中の`i`番目のオブジェクトの`checked`プロパティを更新する処理はこう書きます。
26
+
27
+ ```js
28
+ const update = (arr, index, value) =>
29
+ arr.map((item, i) => ({
30
+ ...item,
31
+ checked: (i === index) ? value : item.checked,
32
+ }));
33
+ ```
34
+
25
- いうわけでこれらを組みあわせてこんな感じでしょうか。
35
+ というわけでこれらを踏まえ考えてみると、こんな感じになるのはないでしょうか。
26
36
  ご質問のコードやデータにタイポと思われる部分が多く、正しく読み取れているか自信が無いので、`parent_id`と`child_id`を指定して更新するパターンと、配列のインデックスを指定して更新するパターンを作ってみました。
27
37
 
28
38
  ```js
@@ -44,7 +54,7 @@
44
54
  ...parent,
45
55
  state: parent.state.map((child, child_index) => ({
46
56
  ...child,
47
- checked: (parent_index === parentIndex && child.child_index === childIndex) ? value : child.checked,
57
+ checked: (parent_index === parentIndex && child_index === childIndex) ? value : child.checked,
48
58
  })),
49
59
  }));
50
60
  ```