回答編集履歴
8
テキスト修正
answer
CHANGED
|
@@ -6,9 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
の左上の点線で囲んだ Initialization と書かれた部分を見ても分かるとおり、`componentDidMount` **は初回の** `render` **の後に呼ばれます。**
|
|
8
8
|
|
|
9
|
-
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined
|
|
9
|
+
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined であり、
|
|
10
10
|
|
|
11
|
-
|
|
12
11
|
```jsx
|
|
13
12
|
<CommentComponent articleID={this.state.article.id}/>
|
|
14
13
|
```
|
7
テキスト修正
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
- [iktakahiro/react-component-lifecycle-diagram](https://github.com/iktakahiro/react-component-lifecycle-diagram) (by iktakahiro さん）
|
|
6
6
|
|
|
7
|
-
の左上の点線で囲んだ
|
|
7
|
+
の左上の点線で囲んだ Initialization と書かれた部分を見ても分かるとおり、`componentDidMount` **は初回の** `render` **の後に呼ばれます。**
|
|
8
8
|
|
|
9
9
|
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined になります。従って、
|
|
10
10
|
|
6
テキスト修正
answer
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
|
|
46
46
|
もし、 妥当な Article ID が1以上の数であれば、if条件は `if (this.state.article.id > 0)` などでもよいでしょう。
|
|
47
47
|
|
|
48
|
-
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず `this.props.articleID` に適正なIDの値が渡されてくることになります。
|
|
48
|
+
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず `this.props.articleID` に(undefinedではない）適正なIDの値が渡されてくることになります。
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
以上参考になれば幸いです。
|
5
テキスト修正
answer
CHANGED
|
File without changes
|
4
テキスト修正
answer
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
このようなときによくやる手としては、`ArticleDetail` の `render` で、まず`this.state.article.id` に妥当な値が入っているかをチェックして、入っていないときは、サーバーと通信中であることを示すローディングアイコンを返させることです。
|
|
19
19
|
|
|
20
|
-
例えばローディングアイコンのコンポーネントを `Loading` として作ったとして、
|
|
20
|
+
例えばローディングアイコンのコンポーネントを `Loading` として作ったとして、以下のようにします。
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
3
テキスト修正
answer
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<CommentComponent articleID={this.state.article.id}/>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
で渡した先の `CommentComponent`
|
|
16
|
+
で渡した先の `CommentComponent` においても、 `this.props.articleID` が undefined になります。
|
|
17
17
|
|
|
18
18
|
このようなときによくやる手としては、`ArticleDetail` の `render` で、まず`this.state.article.id` に妥当な値が入っているかをチェックして、入っていないときは、サーバーと通信中であることを示すローディングアイコンを返させることです。
|
|
19
19
|
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
|
|
46
46
|
もし、 妥当な Article ID が1以上の数であれば、if条件は `if (this.state.article.id > 0)` などでもよいでしょう。
|
|
47
47
|
|
|
48
|
-
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。
|
|
48
|
+
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず `this.props.articleID` に適正なIDの値が渡されてくることになります。
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
以上参考になれば幸いです。
|
2
テキスト修正
answer
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
以下のように、 `render` の先頭で `this.state.article.id` に整数が入っているかをチェックして、入っていなければローディングアイコンを返すようにします。
|
|
31
|
+
妥当な Article ID は整数であると仮定しますと、以下のように、 `render` の先頭で `this.state.article.id` に整数が入っているかをチェックして、入っていなければローディングアイコンを返すようにします。
|
|
32
32
|
|
|
33
33
|
```jsx
|
|
34
34
|
render() {
|
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
・・・
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
+
もし、 妥当な Article ID が1以上の数であれば、if条件は `if (this.state.article.id > 0)` などでもよいでしょう。
|
|
47
|
+
|
|
46
48
|
上記のようにすると、Articleを取得するAPI(`GET /api/v1/${articleID}`)が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度`render`が実行され、そのときは、`this.state.article.id` にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 `<div>` 以下のコンポーネントが返されます。
|
|
47
49
|
|
|
48
50
|
|
1
テキスト修正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
の左上の点線で囲んだInitializeと書かれた部分を見ても分かるとおり、`componentDidMount` **は初回の** `render` **の後に呼ばれます。**
|
|
8
8
|
|
|
9
|
-
従って、`ArticleDetail` の初回の `render` では、`this.state.article` は
|
|
9
|
+
従って、`ArticleDetail` の初回の `render` が実行される時点では、`this.state.article` は初期値として設定された空オブジェクトのままですので、 `this.state.article.id` は undefined になります。従って、
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
```jsx
|