React - 组件不会在foreach循环中呈现？

Question

当你打开一个标签时,我有一个小应用程序,React Route重定向到给定的组件(容器).从容器我想渲染子组件.我使用foreach循环遍历一个列表,其中包含需要给孩子的道具.但是,孩子不会被渲染.

我不想使用map,因为我使用依赖于列表类的库.

render() {   
    return ( 
        <div>
            {this.state.list.ForEach((element) => 
                <ChildComponent childName={element.name} 
        }
        </div> 
    );
}

}

Answer 1

您将Array.forEach与Array.map混淆.forEach没有任何回报.正确的方法是:

<div>
    {this.state.list.map((element, index) => 
        <ChildComponent key={index} childName={element.name} />
    )}
</div> 

map将给定element转换为另一个元素,在这种情况下是一个组件.调用的结果map是随后呈现的组件数组.forEach总是返回,undefined因此代码的结果与写入相同:

<div>
   {undefined}
</div>

请注意,key在渲染组件列表时也是必需的.