Question

我遇到一些问题，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>
        )
    }
});

此组件在其父级内部加载为<SearchResults items={this.state.items} />，而上方的渲染函数内的console.log() 显示正在按预期加载的道具（在最初加载为空之后），因为数据来自上游的Ajax调用。）

但是，forEach循环中的组件似乎没有加载，没有显示，并且它的render方法顶部的console.log（）似乎没有触发。

我很反应，所以可能会遗漏一些显而易见的东西，但是有谁能告诉我我做错了什么？

Answer 1

您需要使用forEach。

，而非使用map

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

JSX中的组件未加载？

1 个答案: