回答編集履歴
4
テキスト修正
answer
CHANGED
|
@@ -13,8 +13,16 @@
|
|
|
13
13
|
toDoList: Todo.push(input),
|
|
14
14
|
});
|
|
15
15
|
```
|
|
16
|
-
によって、 this.state.toDoList には、１つ要素の追加された配列の長さが入るので、 3 という数値が設定されます。
|
|
16
|
+
によって、 this.state.toDoList には、１つ要素の追加された配列の長さが入るので、 3 という数値が設定されます。
|
|
17
|
+
そのため、 render の以下の部分
|
|
18
|
+
|
|
17
19
|
```javascript
|
|
20
|
+
if (this.state.toDoList.length > 1) {
|
|
21
|
+
```
|
|
22
|
+
で、 `this.state.toDoList.length` は undefined になり、 if が判定する条件は false になって、 `<ul>` の中身が作られないために、画面上では、既存のリストアイテムも消えてしまいます。
|
|
23
|
+
|
|
24
|
+
さらに続けて「追加」ボタンをクリックしたときは、
|
|
25
|
+
```javascript
|
|
18
26
|
const Todo = this.state.toDoList;
|
|
19
27
|
```
|
|
20
28
|
によって `const Todo` には 3 という数値が入ってきて、
|
3
テキスト修正
answer
CHANGED
|
@@ -64,6 +64,6 @@
|
|
|
64
64
|
}
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
上記のように、 this.setState するときに、既存の state の何らかのプロパティの配列に追加したり、あるいはstateのあるプロパティはオブジェクトで、それのあるプロパティだけを変えたりするときに、スプレッド
|
|
67
|
+
上記のように、 this.setState するときに、既存の state の何らかのプロパティの配列に追加したり、あるいはstateのあるプロパティはオブジェクトで、それのあるプロパティだけを変えたりするときに、スプレッド構文 `...` はよく使われます。
|
|
68
68
|
|
|
69
69
|
以上参考になれば幸いです。
|
2
テキスト修正
answer
CHANGED
|
@@ -27,10 +27,14 @@
|
|
|
27
27
|
```
|
|
28
28
|
というエラーになります。
|
|
29
29
|
修正の方法ですが、新しい this.state.toDoList を setState する箇所の
|
|
30
|
+
|
|
31
|
+
**修正前：**
|
|
30
32
|
```javascript
|
|
31
33
|
toDoList: Todo.push(input),
|
|
32
34
|
```
|
|
33
35
|
を、たとえば以下のように修正します。
|
|
36
|
+
|
|
37
|
+
**修正後：**
|
|
34
38
|
```javascript
|
|
35
39
|
toDoList: [...Todo, input],
|
|
36
40
|
```
|
1
テキスト修正
answer
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
```javascript
|
|
18
18
|
const Todo = this.state.toDoList;
|
|
19
19
|
```
|
|
20
|
-
によって `const Todo` には 3 という数
|
|
20
|
+
によって `const Todo` には 3 という数値が入ってきて、
|
|
21
21
|
```javascript
|
|
22
22
|
Todo.push(input)
|
|
23
23
|
```
|