JSONフィールドが存在しない場合はJSXスキップ

Question

現在、フィールドがnullの場合にキーペアを追加しないAPIからJSONファイルを処理しています。これはJSONファイル全体を反復しようとすると悲しいことです。

私のコードは、現在item.answer.answerに値がないときのためにエラーが発生します

var ListOfItems = React.createClass({ 
    render: function() { 
     var itemList = jsonFile.data.map(function(item) 
     { 
      return <Item key={item.__key} 
       itemQuestion={item.question} 
       itemQuestionAnswer={item.answer.answer} 
       userName={item.user.name} 
       staffName={item.staff.name} 
       staffImage={item.staff.image_url} /> 
     }); 

     return (
      <div> 
      <ul>{itemList}</ul> 
      </div> 
     ); 
    } 
}); 

です。

ご協力いただきますようお願い申し上げます。

Answer 1

項目の回答タイプがundefinedでないかどうかを確認する条件を追加することで、これを行うことができます。そうでない場合は、値を返すか、それ以外の場合は何も返しません。このようにして、条件が合格した場合にのみ別の項目を追加します（私は条件の短縮形を使用しました）。

var ListOfItems = React.createClass({ 
    render: function() { 
     var itemList = jsonFile.data.map(function(item) 
     { 
      typoeof item.answer != 'undefined' && 
      return <Item key={item.__key} itemQuestion={item.question} 
       itemQuestionAnswer={item.answer.answer} userName={item.user.name} 
       staffName={item.staff.name} staffImage={item.staff.image_url} /> 
     }); 

     return (
      <div> 
       <ul>{itemList}</ul> 
      </div> 
     ); 
    } 
}); 

あなたは常にitem.answerを得るが、それはanswerがundefinedかnullのいずれかであるなら、あなたは私が代わりに提供したコードにitem.answer.answerを確認することができます。

Answer 2

アイテムのリストの大きさによっては、まずbuiltin filter Array methodを使用して、不要なアイテムをすべて削除してから、それらをマップすることができます。これは潜在的にあなたのリスト全体を2回通過することを覚えておいてください。

undefinedを返信する際の注意map。これはではありません。アイテムが返されないようにします。代わりに結果の配列にundefinedという項目があります。アレイはでなく、でなくなります。

はここfilter()に例を示します支援のための

var ListOfItems = React.createClass({ 
    renderItems: function() { 
    return jsonFile.data 
     .filter(function(item) { 
     // This will return any item that has a truthy answer 
     return item.answer && item.answer.answer; 
     }) 
     .map(function(item) { 
     return (
      <Item 
      key={item.__key} 
      itemQuestion={item.question} 
      itemQuestionAnswer={item.answer.answer} 
      userName={item.user.name} 
      staffName={item.staff.name} 
      staffImage={item.staff.image_url} /> 
     ); 
     }); 
    }, 

    render: function() { 
    return (
     <div> 
     <ul> 
      {this.renderItems()} 
     </ul> 
     </div> 
    ); 
    } 
});