如何遍歷對象數組中的數組

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因為稍后編輯數組時將很難管理。 如果您為key分配非常獨特的值（例如id或index + Date.now()會更好。

Answer 2

您似乎在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/>
    );
  }
});