javascriptが未定義のため、アプリの中断を防ぎます。

Question

私は1〜2回のチェックが間に合わなかったので、アプリ全体が壊れていました。簡単な間違いがアプリ全体を壊す可能性があるので、これはjsでの書面による苦痛だと本当に感じています。

は単位が定義されていない場合、それはエラーになります。このコード

{this.state.floor && this.state.floor[this.state.selectedTab].units.length === 0 && <div>render something</div>} 

してください。どうすれば確認できますか？最初のチェックthis.state.floorは動作していないようです。 this.state.floor.length > 1かどうかを確認する必要がありますか？

データの戻り値がネストされているか、複数のネストされたプロパティがある場合、私のjsxはいつかとても複雑になります。

Answer 1

あなたは、このようにlodash get機能でそれを行うことができます。

const r = {a:{b:{name:'foo'}}}; 

const existence = !!_.get(r, 'a.b.name');// !! Convert to the returned value to boolean 

console.log(existence); // true 

あなたは_.get secoundパラメータiはどうしたらあなたのケースで'a.b.name'

のようなプロパティパスすることができ見ることができますがあります。

!!_.get(this.state, `floor[${this.state.selectedTab}].units.length`); 

Answer 2

何かをレンダリングすべきかどうかを決定するロジックが複雑になる場合、私は通常、メインレンダリングのjsxにすべてを残すのではなく、関数にそれを抽出します。

renderSomething() { 
    const { floor, selectedTab } = this.state 
    if (floor && floor[selectedTab] && floor[selectedTab].units && floor[selectedTab].units.length === 0) { 
    return <div>render something</div> 
    } 
    return null 
} 

render() { 
    return (
    <div> 
     {renderSomething()} 
     {renderSomethingElse()} 
    </div> 
) 
} 

あなたの状態について何も仮定することができない場合、上記のチェックは安全でなければなりません。通常、チェックの一部を不要にするデータを制御している場合は、あなたの状態に関するいくつかのことを仮定することができます。たとえば、フロアオブジェクトのすべての値に常にunitsプロパティがあることがわかります。したがって、floor[selectedTab].unitsは必須ではありません。余分なチェックは明らかに何かを傷つけることはありませんが、しばしば冗長チェックとなるものを追加するコードを混乱させる可能性があります。

あなたは値が未定義であるかもしれないものの痛みの維持トラックを感じ、余分な安全性チェックが必要ですしている場合、私は間違いなくflowかtypescriptを使用してお勧めします。コンピュータにその簿記をたくさんさせてください。