回答編集履歴

4

テキスト修正

2019/08/14 16:05

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -28,7 +28,23 @@
28
28
 
29
29
  ```
30
30
 
31
- によって、 this.state.toDoList には、1つ要素の追加された配列の長さが入るので、 3 という数値が設定されます。そのため次に「追加」ボタンをクリックしたときは、
31
+ によって、 this.state.toDoList には、1つ要素の追加された配列の長さが入るので、 3 という数値が設定されます。
32
+
33
+ そのため、 render の以下の部分
34
+
35
+
36
+
37
+ ```javascript
38
+
39
+ if (this.state.toDoList.length > 1) {
40
+
41
+ ```
42
+
43
+ で、 `this.state.toDoList.length` は undefined になり、 if が判定する条件は false になって、 `<ul>` の中身が作られないために、画面上では、既存のリストアイテムも消えてしまいます。
44
+
45
+
46
+
47
+ さらに続けて「追加」ボタンをクリックしたときは、
32
48
 
33
49
  ```javascript
34
50
 

3

テキスト修正

2019/08/14 16:05

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -130,7 +130,7 @@
130
130
 
131
131
 
132
132
 
133
- 上記のように、 this.setState するときに、既存の state の何らかのプロパティの配列に追加したり、あるいはstateのあるプロパティはオブジェクトで、それのあるプロパティだけを変えたりするときに、スプレッド演算子 `...` はよく使われます。
133
+ 上記のように、 this.setState するときに、既存の state の何らかのプロパティの配列に追加したり、あるいはstateのあるプロパティはオブジェクトで、それのあるプロパティだけを変えたりするときに、スプレッド構文 `...` はよく使われます。
134
134
 
135
135
 
136
136
 

2

テキスト修正

2019/08/14 15:51

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -56,6 +56,10 @@
56
56
 
57
57
  修正の方法ですが、新しい this.state.toDoList を setState する箇所の
58
58
 
59
+
60
+
61
+ **修正前:**
62
+
59
63
  ```javascript
60
64
 
61
65
  toDoList: Todo.push(input),
@@ -63,6 +67,10 @@
63
67
  ```
64
68
 
65
69
  を、たとえば以下のように修正します。
70
+
71
+
72
+
73
+ **修正後:**
66
74
 
67
75
  ```javascript
68
76
 

1

テキスト修正

2019/08/14 15:51

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  ```
38
38
 
39
- によって `const Todo` には 3 という数が入ってきて、
39
+ によって `const Todo` には 3 という数が入ってきて、
40
40
 
41
41
  ```javascript
42
42