javascript - JSX 中的组件未加载？

Question

我在 React 不显示与组件 Prop 相关的数据时遇到了一些问题:

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>
        )
    }
});

此组件在其父组件中加载为 <SearchResults items={this.state.items} /> , 和 console.log()在上面的渲染函数中，确实显示了正在按预期加载的 Prop (在最初加载为空之后，因为数据来自上游更远的 Ajax 调用)。

但是，forEach 循环内的组件似乎没有加载，没有显示，并且其 render 方法顶部的 console.log() 似乎没有触发。

我对 react 还很陌生，所以可能会遗漏一些明显的东西，但谁能告诉我我做错了什么？

Answer 1

您需要使用 map 而不是使用 forEach。

forEach 方法被设计为具有副作用，因此不返回值(或者更确切地说，它返回 undefined)。评估 forEach 后，看一下 JSX 文字。

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

相反，使用 map 并返回子组件。

return (
  <div>
    {this.props.items.map(function(item) {
      console.log(item); // Fires correctly
      return <ItemListing item={item} />;
    })}
  </div>
)

评估后，JSX 文字看起来像这样(取决于 this.props.items 中的项目数):

return (
  <div>
    {[
      <ItemListing item={this.props.items[0]} />,
      <ItemListing item={this.props.items[1]} />,
      // ...
      <ItemListing item={this.props.items[n]} />,
    ]}
  </div>
)