リアクションレンダリング前にネストされたJSONキーを確認する

Question

私はMarvelAPIからデータを取得していますが、私がアクセスしているキーが利用可能かどうかは保証されていません。 だから私はそれらにアクセスする前にifステートメントで各キーをチェックしています。

ご覧のとおり、以下のコードは非常に醜いです。これを行うためのより良い/標準的な方法がありますか？各キーの

renderCharacterNames(detail) { 
    console.log('detail', detail) 
    if (detail && detail[0] && detail[0].characters && detail[0].characters.items && detail[0].characters.items.length > 0) { 
     return (
      <div> 
       {detail[0].characters.items.map((obj, index) => { 
        return <li key={index}>{obj.name}</li> 
       })} 
      </div> 
     ) 
    } else { 
     return <div>No Character Name</div> 
    } 
} 

renderComicDetail() { 
    var detail = this.props.comicDetail; 
    if (!detail) { 
     return (
      <div>No Data Yet (loading?)</div> 
     ) 
    } 
    return (
     <div> 
      {this.renderCharacterNames(detail)} 
     </div> 
    ) 
} 

Answer 1

設定default propertiesので、あなたは彼らが未定義であることを心配する必要はありません。私はデフォルトの名前を ""にし、文字を空の配列にします。

Detail.defaultProps = { 名前： ''、 文字：[] };