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

Question

我有一个小应用程序，当你打开一个选项卡时，React Route将重定向到给定的组件（容器）。并从我想要呈现子组件的容器。我使用foreach循环遍历一个需要给孩子的道具列表。但是，孩子没有得到渲染。

我不想使用地图，因为我使用依赖列表类的库。

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呈现组件的列表时，也是必要的。