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

Posted 2023-02-21

【中文标题】React - 组件不会在 foreach 循环中呈现？

【英文标题】：React - component will not render in foreach loop?

【发布时间】：2018-03-26 23:10:15

【问题描述】：

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

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

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

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

【讨论】：

谢谢。你是救生员。我真的为此苦苦挣扎。

这也救了我的命。谢谢！