オブジェクトの配列内で配列をループする方法

Question

私は反応の中でループを実行する方法を知っていますが、ループしている配列の中にすでにあるオブジェクトの中でどのようにしますか？

私は各成分の項目を<li>として表示しようとしていますが、これまで調理法で作業していましたが、成分がなくなりました。もし誰かがチャイムインすると、私はそれを感謝します。この方法について

var Recipes = React.createClass({ 
// hook up data model 
    getInitialState: function() { 
    return { 
     recipeList: [ 
     {recipe: 'Cookies', ingredients: ['Flour ', 'Chocolate']}, 
     {recipe: 'Cake', ingredients: ['Flour ', 'Sprinkles']}, 
     {recipe: 'Onion Pie', ingredients: ['Onion ', 'Pie-Crust']} 
     ] 
    } 
    }, 

    loop: function() { 
    {this.state.recipeList.flatMap('ingredients').map(item, index) => (
     <li key={index} className="list-group-item">{ingredient.ingredients}</li> 
    )} 
    }, 

    render: function() { 
    return (
     <div> 
     {this.state.recipeList.map((item, index) => (
      <div className="panel panel-default"> 
      <div className="panel-heading"><h3 className="panel-title">{item.recipe}</h3></div> 
      <div className="panel-body"> 
       <ul className="list-group"> 
       {this.loop} 
       </ul> 
      </div> 
      </div> 
     ) 
     )} 
     </div> 
    ); 
    } 
}); 

Answer 1

方法：

loop: function(ingredients) { 
    return ingredients.map((ingredient, index) => { 
    return (<li key={index} className="list-group-item">{ingredient}</li>) 
    }) 
    }, 

    render(){ 
     ... 
     {this.loop(item.ingredients)} 
     ... 
    } 

もう一つ後の配列を製作中とき、管理が困難になりますので、あなたはkeyとして、配列のインデックスを使用しないでください。あなたがidかindex + Date.now()

Answer 2

のような非常にユニークなものでkeyを割り当てる場合は、loop方法でreturnの文が欠落しているようだ方がよいでしょう。

ユーザーは、（あなたのサンプル中のコール括弧なしthis.loopを参照してください）あなただけではなく、部品の構造に置くのメソッドを呼び出す必要があることを覚えて、あなたが望むだろうな限り深くレンダリングカスケード接続することができます

var myComponent = React.createClass({ 
    renderListElements: function (parent) { 
    return this.state.listElements[parent].map((element, index) => (
     <li 
     className="my-component__sub-component__list-element" 
     key={`${parent.uid}_${element.uid}`} 
     > 
     {element.name} 
     </li> 
    )); 
    }, 

    render: function() { 
    var parentsId = [ 0, 1, 2, 3 ]; 

    return (
     <div className="my-component"> 
     {parentsId.map((item, index) => (
      <div 
      className="my-component__sub-component" 
      key={item.uid} 
      > 
      {this.renderListElements(item)} 
      </div> 
     )} 
     <div/> 
    ); 
    } 
});