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>
`

如何在Recipes组件中正确输出？我已经对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>}

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

2 个答案: