回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -71,4 +71,4 @@
|
|
|
71
71
|
);
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
なお、追記ふくめて上記の回答では、Rails側
|
|
74
|
+
なお、追記ふくめて上記の回答では、（Rails側のモデルの）あるProductにReviewが１件もついていなくても、`GET /api/v1/products/:id` のレスポンスJSONにはreviewsプロパティは存在して、空の配列として返してくれることを前提にしています。
|
5
テキスト修正
answer
CHANGED
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
**ProductPage:**
|
|
58
|
-
```
|
|
58
|
+
```JSX
|
|
59
59
|
const ProductPage = ({ product }) => (
|
|
60
60
|
product && (
|
|
61
61
|
<div>
|
4
テキスト修正
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
こんにちは。
|
|
2
2
|
|
|
3
|
-
`ProductPageContainer` の `constructor` で `this.state` の初期化をしているところで、 `this.state.product`
|
|
3
|
+
`ProductPageContainer` の `constructor` で `this.state` の初期化をしているところで、 `this.state.product`の初期値を、以下のように修正してみるといかがでしょうか？
|
|
4
4
|
|
|
5
5
|
#### 修正前
|
|
6
6
|
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
|
|
39
39
|
## 追記
|
|
40
40
|
|
|
41
|
-
上記に書いた方法の他には、以下のように `this.state.product` を null で初期化しておいて、`ProductPage` のほうで
|
|
41
|
+
上記に書いた方法の他には、以下のように `this.state.product` を `null` で初期化しておいて、`ProductPage` のほうで propsで渡される`product` の null チェックを追加するという手もあるかと思います。
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
#### 修正後
|
|
45
45
|
|
|
46
|
-
ProductPageContainer:
|
|
46
|
+
**ProductPageContainer:**
|
|
47
47
|
```javascript
|
|
48
48
|
class ProductPageContainer extends Component {
|
|
49
49
|
constructor(props){
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
}
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
ProductPage:
|
|
57
|
+
**ProductPage:**
|
|
58
58
|
```javascript
|
|
59
59
|
const ProductPage = ({ product }) => (
|
|
60
60
|
product && (
|
3
テキスト修正
answer
CHANGED
|
@@ -71,4 +71,4 @@
|
|
|
71
71
|
);
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
なお、追記ふくめて上記の回答では、Rails側で、あるProductにReviewが１件もついていなくても、`GET /api/v1/products/:id` のレスポンスにはreviewsプロパティは存在して、空の配列として返してくれることを前提にしています。
|
|
74
|
+
なお、追記ふくめて上記の回答では、Rails側で、あるProductにReviewが１件もついていなくても、`GET /api/v1/products/:id` のレスポンスJSONにはreviewsプロパティは存在して、空の配列として返してくれることを前提にしています。
|
2
テキスト修正
answer
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
super(props)
|
|
24
24
|
this.state = {
|
|
25
25
|
product: {
|
|
26
|
-
id:
|
|
26
|
+
id: 0,
|
|
27
27
|
name: null,
|
|
28
28
|
reviews: [],
|
|
29
29
|
}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
なお上記では、 APIから返される有効なproductのidは
|
|
34
|
+
なお上記では、 APIから返される有効なproductのidは1以上であることを前提として、0を無効なidの値として初期値に使用しています。
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
以上、参考になれば幸いです。
|
1
テキスト修正
answer
CHANGED
|
@@ -34,4 +34,41 @@
|
|
|
34
34
|
なお上記では、 APIから返される有効なproductのidは0以上であることを前提として、-1 を無効なidの値として初期値に使用しています。他に、 id の初期値としては 0 、あるいは場合によっては `NaN` も考えられます。
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
以上、参考になれば幸いです。
|
|
37
|
+
以上、参考になれば幸いです。
|
|
38
|
+
|
|
39
|
+
## 追記
|
|
40
|
+
|
|
41
|
+
上記に書いた方法の他には、以下のように `this.state.product` を null で初期化しておいて、`ProductPage` のほうでprops で渡される`product` の null チェックを追加するという手もあるかと思います。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
#### 修正後
|
|
45
|
+
|
|
46
|
+
ProductPageContainer:
|
|
47
|
+
```javascript
|
|
48
|
+
class ProductPageContainer extends Component {
|
|
49
|
+
constructor(props){
|
|
50
|
+
super(props)
|
|
51
|
+
this.state = {
|
|
52
|
+
product: null
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
ProductPage:
|
|
58
|
+
```javascript
|
|
59
|
+
const ProductPage = ({ product }) => (
|
|
60
|
+
product && (
|
|
61
|
+
<div>
|
|
62
|
+
{product.name}
|
|
63
|
+
{product.reviews.map( review =>
|
|
64
|
+
<ProductReview
|
|
65
|
+
review={review}
|
|
66
|
+
key={review.id}
|
|
67
|
+
/>)
|
|
68
|
+
}
|
|
69
|
+
</div>
|
|
70
|
+
)
|
|
71
|
+
);
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
なお、追記ふくめて上記の回答では、Rails側で、あるProductにReviewが１件もついていなくても、`GET /api/v1/products/:id` のレスポンスにはreviewsプロパティは存在して、空の配列として返してくれることを前提にしています。
|