Javascript JSX中的组件未加载？

React未显示与组件道具相关的数据时，我遇到了一些问题：

import React from 'react';

import {ItemListing} from './ItemListing.js';

export var SearchResults = React.createClass({
    render: function() {
        console.log('Render called! SearchResults props', this.props); // Fires and displays data as expected
        return (
            <div>
                {this.props.items.forEach(function(item) {
                    console.log(item); // Fires correctly
                    <ItemListing item={item} /> // Does not run - a console.log() inside the render method of this component does not fire
                })}
            </div>
        )
    }
});

从“React”导入React；
从“./ItemListing.js”导入{ItemListing}；
导出var SearchResults=React.createClass({
render:function（）{
console.log（'Render called！SearchResults props'，this.props）；//按预期激发和显示数据
返回(
{this.props.items.forEach（函数（项））{
console.log（item）；//正确激发
//未运行-此组件的render方法中的console.log（）不会激发
})}
)
}
});

该组件作为

加载到其父组件中，上面的渲染函数中的

控制台.log（）

确实显示了按预期加载的道具（最初加载为空后，数据来自更上游的Ajax调用）

但是，forEach循环中的组件似乎没有加载，没有显示，其render方法顶部的console.log（）似乎没有启动

---

我是个新手，所以可能遗漏了一些明显的东西，但有人能告诉我我做错了什么吗？

而不是使用

forEach

你需要使用

map

forEach

方法被设计为具有副作用，因此不返回值（或者更确切地说，它返回

未定义的
）。在计算
forEach
之后，查看JSX文本

return (
  <div>
    {undefined}
  </div>
)

经过计算后，JSX文本看起来像这样（取决于
this.props.items
中的项目数）：

返回(
{[
,
,
// ...
,
]}
)
您需要使用
map
而不是使用
forEach

forEach
方法被设计为具有副作用，因此不返回值（或者更确切地说，它返回
未定义的
）。在计算
forEach
之后，查看JSX文本

return (
  <div>
    {undefined}
  </div>
)

经过计算后，JSX文本看起来像这样（取决于
this.props.items
中的项目数）：

返回(
{[
,
,
// ...
,
]}
)
raaaage-我以前一直在使用map（），但忽略了return关键字。总是简单的事情：（非常感谢。Raaaaage-我以前一直在使用map（），但忽略了return关键字。总是简单的事情：（非常感谢）。
return (
  <div>
    {[
      <ItemListing item={this.props.items[0]} />,
      <ItemListing item={this.props.items[1]} />,
      // ...
      <ItemListing item={this.props.items[n]} />,
    ]}
  </div>
)