在反应中输出对象数组的正确方法是什么？

Question

我知道要做出反应，似乎无法通过这段代码。我有一些我想输出到dom的数据，但我不确定如何去做。谁能帮忙？

的样本数据： App.js：

 constructor(props){ 
     super(props); 
     this.state.foods = [ 
     { 
     recipe: '1 cup egg, 4 cups...', 
     time: 42 
     }, 
     { 
     recipe: '1 tbsp butter, 2 cups...', 
     time: 120 
     } 
     ] 
     } 
    `render(){ 
    <div className='App'> 
     <Recipes data={this.state.foods} /> 
    </div> 
` 

我将如何正确去在我的食谱分量输出呢？我已经尝试过对this.props.foods数组的内容进行forEach循环，但无法使其工作，任何帮助都会很棒。

The output I would like to see is: 

    <H2> 1 cup egg, 4 cups...</h2> 
    <h3> Time: 42 minutes </h2> 
    <br> 
    <H2> 1 tbsp butter, 2 cups...</h2> 
    <h3> Time: 120 minutes </h2> 

Answer 1

使用Array.prototype.map()，如：

{this.props.data.map(food => <div> 
    <h2>{food.recipe}</h2> 
    <h3>Time: {food.time} minute{food.time !== 1 ? 's' : ''}</h3> 
</div>} 

Answer 2

想法的方式是利用地图作为@Jonny还建议，然而，只要你映射了一个数组，你应该加入他的回答指定生成的JSX元素的键。它有助于提高反应的性能，因为React通过键标识了变化，如果键是相同的，则元素不会重新渲染。

想法键是索引以外的唯一属性，因为如果从数组中间删除项目，索引可能会更改。但是，如果没有其他选项可用，你也可以使用它

{this.props.data.map((food, index) => <div key={index}> 
    <h2>{food.recipe}</h2> 
    <h3>Time: {food.time} minute{food.time !== 1 ? 's' : ''}</h3> 
</div>}