回答編集履歴

2

コードの位置修正

2017/11/01 07:15

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  例えば`(a, b) => a / b;`という割り算の関数作ったとして、
8
8
 
9
- 引数bにStringや0を入れて動作しませんって騒がれても変な値入れんなって怒られて終わりでしょ?
9
+ 引数bにStringや0を入れて動作しませんって騒がれても変な値入れんなって怒て終わりでしょ?
10
10
 
11
11
 
12
12
 
@@ -20,21 +20,23 @@
20
20
 
21
21
 
22
22
 
23
- つまり、こういう風に変更すれば簡易的な対応は出来るね。
24
-
25
- Array以外のStringやNumber入れられたらエラー出るから簡易的な対応にはならないけどね。
26
-
27
-
28
-
29
- でも、それ以上を求めるなら関数叩く側の準備を怠らないように設計すれば大丈夫だと思うよ。
30
-
31
-
32
-
33
23
  ```JavaScript
34
24
 
35
25
  let msgList = children['msg_list'] || [];
36
26
 
37
27
  ```
28
+
29
+
30
+
31
+ つまり、こういう風に変更すれば簡易的な対応になるね。
32
+
33
+ Array以外のStringやNumber入れられたらエラー出るから全てのケースをハンドリングすることは難しい。
34
+
35
+ でも、それ以上を求めるなら関数叩く側の準備を怠らないように設計すれば十分。
36
+
37
+
38
+
39
+ ※Reactだからpropの値を制御しきるのは難しいけど、Undefinedか配列かの二択くらいなら保証出来ると思うよ。
38
40
 
39
41
 
40
42
 

1

解説を追加

2017/11/01 07:15

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -1,3 +1,35 @@
1
+ 理想で語るなら、`this.props.children.msg_list`で配列を期待しているのに、
2
+
3
+ 変数が揃ってないのに`render`メソッドを叩き始めている時点で設計がおかしい。
4
+
5
+
6
+
7
+ 例えば`(a, b) => a / b;`という割り算の関数作ったとして、
8
+
9
+ 引数bにStringや0を入れて動作しませんって騒がれても変な値入れんなって怒られて終わりでしょ?
10
+
11
+
12
+
13
+ ---
14
+
15
+
16
+
17
+ とはいうものの、現実ではいつの間にかundefinedになってしまう事は結構ある。
18
+
19
+ そういう時、JavaScriptは`||`で括れば[falsy](https://developer.mozilla.org/ja/docs/Glossary/Falsy)な値であれば右辺が入る。
20
+
21
+
22
+
23
+ つまり、こういう風に変更すれば簡易的な対応は出来るね。
24
+
25
+ Array以外のStringやNumber入れられたらエラー出るから簡易的な対応にはならないけどね。
26
+
27
+
28
+
29
+ でも、それ以上を求めるなら関数叩く側の準備を怠らないように設計すれば大丈夫だと思うよ。
30
+
31
+
32
+
1
33
  ```JavaScript
2
34
 
3
35
  let msgList = children['msg_list'] || [];
@@ -6,28 +38,32 @@
6
38
 
7
39
 
8
40
 
41
+ ---
42
+
43
+
44
+
9
- これで一撃。
45
+ 以下確認
10
46
 
11
47
 
12
48
 
13
49
  ```JavaScript
14
50
 
15
- let children = {};
51
+ var children, msgList;
16
-
17
- let msgList = children['msg_list'] || [];
18
-
19
- console.log(msgList);
20
-
21
- // Array []
22
52
 
23
53
 
24
54
 
25
- let children = {msg_list: [123, 234]};
55
+ children = {};
26
56
 
27
- let msgList = children['msg_list'] || [];
57
+ msgList = children['msg_list'] || [];
28
58
 
29
- console.log(msgList);
59
+ console.log(msgList); // Array []
30
60
 
61
+
62
+
63
+ children = {msg_list: [123, 234]};
64
+
65
+ msgList = children['msg_list'] || [];
66
+
31
- // Array [ 123, 234 ]
67
+ console.log(msgList); // Array [ 123, 234 ]
32
68
 
33
69
  ```