回答編集履歴
2
コードの位置修正
answer
CHANGED
|
@@ -2,22 +2,23 @@
|
|
|
2
2
|
変数が揃ってないのに`render`メソッドを叩き始めている時点で設計がおかしい。
|
|
3
3
|
|
|
4
4
|
例えば`(a, b) => a / b;`という割り算の関数作ったとして、
|
|
5
|
-
引数bにStringや0を入れて動作しませんって騒がれても変な値入れんなって怒
|
|
5
|
+
引数bにStringや0を入れて動作しませんって騒がれても変な値入れんなって怒って終わりでしょ？
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
とはいうものの、現実ではいつの間にかundefinedになってしまう事は結構ある。
|
|
10
10
|
そういう時、JavaScriptは`||`で括れば[falsy](https://developer.mozilla.org/ja/docs/Glossary/Falsy)な値であれば右辺が入る。
|
|
11
11
|
|
|
12
|
-
つまり、こういう風に変更すれば簡易的な対応は出来るね。
|
|
13
|
-
Array以外のStringやNumber入れられたらエラー出るから簡易的な対応にはならないけどね。
|
|
14
|
-
|
|
15
|
-
でも、それ以上を求めるなら関数叩く側の準備を怠らないように設計すれば大丈夫だと思うよ。
|
|
16
|
-
|
|
17
12
|
```JavaScript
|
|
18
13
|
let msgList = children['msg_list'] || [];
|
|
19
14
|
```
|
|
20
15
|
|
|
16
|
+
つまり、こういう風に変更すれば簡易的な対応になるね。
|
|
17
|
+
Array以外のStringやNumber入れられたらエラー出るから全てのケースをハンドリングすることは難しい。
|
|
18
|
+
でも、それ以上を求めるなら関数叩く側の準備を怠らないように設計すれば十分。
|
|
19
|
+
|
|
20
|
+
※Reactだからpropの値を制御しきるのは難しいけど、Undefinedか配列かの二択くらいなら保証出来ると思うよ。
|
|
21
|
+
|
|
21
22
|
---
|
|
22
23
|
|
|
23
24
|
以下確認
|
1
解説を追加
answer
CHANGED
|
@@ -1,17 +1,35 @@
|
|
|
1
|
+
理想で語るなら、`this.props.children.msg_list`で配列を期待しているのに、
|
|
2
|
+
変数が揃ってないのに`render`メソッドを叩き始めている時点で設計がおかしい。
|
|
3
|
+
|
|
4
|
+
例えば`(a, b) => a / b;`という割り算の関数作ったとして、
|
|
5
|
+
引数bにStringや0を入れて動作しませんって騒がれても変な値入れんなって怒られて終わりでしょ？
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
とはいうものの、現実ではいつの間にかundefinedになってしまう事は結構ある。
|
|
10
|
+
そういう時、JavaScriptは`||`で括れば[falsy](https://developer.mozilla.org/ja/docs/Glossary/Falsy)な値であれば右辺が入る。
|
|
11
|
+
|
|
12
|
+
つまり、こういう風に変更すれば簡易的な対応は出来るね。
|
|
13
|
+
Array以外のStringやNumber入れられたらエラー出るから簡易的な対応にはならないけどね。
|
|
14
|
+
|
|
15
|
+
でも、それ以上を求めるなら関数叩く側の準備を怠らないように設計すれば大丈夫だと思うよ。
|
|
16
|
+
|
|
1
17
|
```JavaScript
|
|
2
18
|
let msgList = children['msg_list'] || [];
|
|
3
19
|
```
|
|
4
20
|
|
|
5
|
-
|
|
21
|
+
---
|
|
6
22
|
|
|
23
|
+
以下確認
|
|
24
|
+
|
|
7
25
|
```JavaScript
|
|
8
|
-
|
|
26
|
+
var children, msgList;
|
|
9
|
-
let msgList = children['msg_list'] || [];
|
|
10
|
-
console.log(msgList);
|
|
11
|
-
// Array []
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
children = {};
|
|
14
|
-
|
|
29
|
+
msgList = children['msg_list'] || [];
|
|
15
|
-
console.log(msgList);
|
|
30
|
+
console.log(msgList); // Array []
|
|
31
|
+
|
|
32
|
+
children = {msg_list: [123, 234]};
|
|
33
|
+
msgList = children['msg_list'] || [];
|
|
16
|
-
// Array [ 123, 234 ]
|
|
34
|
+
console.log(msgList); // Array [ 123, 234 ]
|
|
17
35
|
```
|