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在渲染组件列表时也是必需的。