ヌル合体オペレータJavascript

Question

この方法にはどのようにしたらよいですか。

this.state.updateItem?this.state.updateItem.unit:'Unit'; 

私はthis.state.updateItem.unitで試しました。 'Unit'。しかし、this.state.updateItemがNULLなので、unitのプロパティを見つけることができないので、エラーが発生することがわかりました。

どのようにより良い方法でそれを行うには？

Answer 1

あなたはこのような操作を行う必要があります：私たちは（最終的には、うまくいけば）このような何かを行うことができますせるoptional chainingためのES（JavaScriptの）に、ステージ1つの提案は

(this.state.updateItem || {}).unit || 'Unit' 

があります：あなたはバベルをやっている場合

this.state.updateItem?.unit || 'Unit' 

そして、あなたは今、それを使用することができます！：
https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

Answer 2

あなたはデフォルト値として空のオブジェクトを設定して試すことができます：

(this.state.updateItem || {}).unit || 'Unit' 

ユニットは、常にどちらかの値を持っているか、未定義になります。今の

Answer 3

ここES6の非構造およびデフォルトを使用しての方法です：

const { 
    updateItem: { 
    unit = 'Unit' 
    } = {} 
} = this.state; 

その後、あなたはちょうどあなたがこのような何かを行うことができunit

Answer 4

を使用することができます。

const path = (pathString, obj) => 
    pathString.split(".") 
    .reduce((obj = {}, key) => obj[key], obj); 

const defaultTo = (x, y) => y == null ? x : y; 

// in your own code 
const unit = defaultTo(
    "Unit", 
    path("state.updateItem.unit", this) 
); 

これらの関数は、ramdaやlodash/fpのようなライブラリ内にすでに存在しています。

また、完全には完全ではありませんが、どこでもobj?.state?.updateItem?.unitの必要性が軽減されます。