javascript - 如何循环遍历对象数组中的数组

Question

我知道如何在 react 中运行循环，但我如何在一个已经在循环数组中的对象中执行它？

我试图将每个成分项目显示为 <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()

会更好