回答編集履歴
8
テキスト修正
test
CHANGED
|
@@ -14,9 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined
|
|
17
|
+
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined であり、
|
|
18
|
-
|
|
19
|
-
|
|
20
18
|
|
|
21
19
|
|
|
22
20
|
|
7
テキスト修正
test
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
の左上の点線で囲んだInitializ
|
|
13
|
+
の左上の点線で囲んだ Initialization と書かれた部分を見ても分かるとおり、`componentDidMount` **は初回の** `render` **の後に呼ばれます。**
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
6
テキスト修正
test
CHANGED
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
|
|
93
93
|
|
|
94
94
|
|
|
95
|
-
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず `this.props.articleID` に適正なIDの値が渡されてくることになります。
|
|
95
|
+
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず `this.props.articleID` に(undefinedではない）適正なIDの値が渡されてくることになります。
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
|
5
テキスト修正
test
CHANGED
|
File without changes
|
4
テキスト修正
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
例えばローディングアイコンのコンポーネントを `Loading` として作ったとして、
|
|
39
|
+
例えばローディングアイコンのコンポーネントを `Loading` として作ったとして、以下のようにします。
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
3
テキスト修正
test
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
で渡した先の `CommentComponent`
|
|
31
|
+
で渡した先の `CommentComponent` においても、 `this.props.articleID` が undefined になります。
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
|
|
93
93
|
|
|
94
94
|
|
|
95
|
-
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。
|
|
95
|
+
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず `this.props.articleID` に適正なIDの値が渡されてくることになります。
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
|
2
テキスト修正
test
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
61
|
-
以下のように、 `render` の先頭で `this.state.article.id` に整数が入っているかをチェックして、入っていなければローディングアイコンを返すようにします。
|
|
61
|
+
妥当な Article ID は整数であると仮定しますと、以下のように、 `render` の先頭で `this.state.article.id` に整数が入っているかをチェックして、入っていなければローディングアイコンを返すようにします。
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
|
|
@@ -88,6 +88,10 @@
|
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
|
|
91
|
+
もし、 妥当な Article ID が1以上の数であれば、if条件は `if (this.state.article.id > 0)` などでもよいでしょう。
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
91
95
|
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。
|
|
92
96
|
|
|
93
97
|
|
1
テキスト修正
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
従って、`ArticleDetail` の初回の `render` では、`this.state.article` は
|
|
17
|
+
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined になります。従って、
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|