回答編集履歴

3

細かい修正

2020/02/29 08:20

投稿

hoshi-takanori
hoshi-takanori

スコア7901

test CHANGED
@@ -66,11 +66,11 @@
66
66
 
67
67
  return { ...item, text };
68
68
 
69
- } else {
69
+ } else {
70
70
 
71
- return item
71
+ return item
72
72
 
73
- }
73
+ }
74
74
 
75
75
  });
76
76
 
@@ -81,6 +81,8 @@
81
81
  });
82
82
 
83
83
  }
84
+
85
+
84
86
 
85
87
  callBackToggleTask(id, isDone){
86
88
 
@@ -94,4 +96,4 @@
94
96
 
95
97
 
96
98
 
97
- また、Task の中で id, text, isDone を state に保存してますが、これらは props の値をそのまま使うべきです。Task に必要なのは editMode だけのはず。
99
+ また、Task の中で id, text, isDone を state に保存してますが、これらは props の値をそのまま使うべきです。Task の state に必要なのは editMode だけのはず。

2

さらに追記

2020/02/29 08:20

投稿

hoshi-takanori
hoshi-takanori

スコア7901

test CHANGED
@@ -58,24 +58,40 @@
58
58
 
59
59
 
60
60
 
61
- callBackChangeTask(text){
61
+ callBackChangeTask(id, text){
62
+
63
+ let data = this.state.data.map(item => {
64
+
65
+ if (item.id === id) {
66
+
67
+ return { ...item, text };
68
+
69
+ } else {
70
+
71
+ return item
72
+
73
+ }
74
+
75
+ });
62
76
 
63
77
  this.setState({
64
78
 
65
- text: text
79
+ data: data
66
80
 
67
81
  });
68
82
 
69
83
  }
70
84
 
71
- callBackToggleTask(isDone){
85
+ callBackToggleTask(id, isDone){
72
86
 
73
- this.setState({
87
+ let data = this.state.data.map(item => item.id === id ? { ...item, isDone: !isDone } : item);
74
88
 
75
- isDone: !isDone
89
+ this.setState({ data });
76
-
77
- });
78
90
 
79
91
  }
80
92
 
81
93
  ```
94
+
95
+
96
+
97
+ また、Task の中で id, text, isDone を state に保存してますが、これらは props の値をそのまま使うべきです。Task に必要なのは editMode だけのはず。

1

追記

2020/02/29 07:55

投稿

hoshi-takanori
hoshi-takanori

スコア7901

test CHANGED
@@ -1,3 +1,53 @@
1
+ TodoApp の callBackChangeTask や callBackToggleTask で this.setState していますが、これは TodoApp 全体の state を更新してしまっています。
2
+
3
+
4
+
5
+ ```
6
+
7
+ // TodoApp の state
8
+
9
+
10
+
11
+ {
12
+
13
+ "data": [
14
+
15
+ {
16
+
17
+ "id": "0.c0ihmbr6ocu",
18
+
19
+ "text": "sample todo1", // 本来は、これや
20
+
21
+ "isDone": false // これや
22
+
23
+ },
24
+
25
+ {
26
+
27
+ "id": "0.43mkltzx7ie",
28
+
29
+ "text": "sample todo2", // これや
30
+
31
+ "isDone": true // これを更新したいはず
32
+
33
+ }
34
+
35
+ ],
36
+
37
+ "searchText": "",
38
+
39
+
40
+
41
+ "text": "edited todo", // 実際には、これや
42
+
43
+ "isDone": true // これが追加されてる
44
+
45
+ }
46
+
47
+ ```
48
+
49
+
50
+
1
51
  text や isDone は各タスクの属性ですから、callBackChangeTask や callBackToggleTask の引数にタスクの id を追加して、指定されたタスクの text や isDone を変更する必要があります。
2
52
 
3
53