Как перебирать массив в массиве объектов

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, потому что это будет трудно управлять, когда editting массив позже. Это будет лучше, если вы назначаете key с чем-то очень уникальным, как id или index + Date.now()

Answer 2

Вы, кажется, отсутствуют return заявления в методе loop.

Вы можете каскад рендеринга так глубоко, как вы хотите, только помните, что вам нужно вызвать метод вместо просто поместив его в структуре компонентов (см 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/> 
    ); 
    } 
});