javascript - ReactJS:在循环中返回 React 组件

Question

我试图循环遍历一个数组并在每个元素上返回一个 React 组件。正在调用渲染函数，但没有显示任何内容。

class ListOfFoundPages extends Component {
  constructor(props) {
    super(props);
    this._renderList = this._renderList.bind(this);
  }
  _renderList(data) {
    if (data !== null) {
      // eslint-disable-next-line
      data.list.map( (obj) => {
        return <ListItem obj={obj} />;
      });
    }
  }
  render() {
    return (
      <ul className="listOfFoundPages">
        {this._renderList(this.props.list)}
      </ul>
    );
  }
}

这是要返回的组件:

const ListItem = (props) => {
  return (
    <li>
      <div className="foundPagesItem">
        <img role="presentation" className="searchPageImg" src={props.obj.picture.data.url} />
        <span className="searchPageInfo">{props.obj.name} - {props.obj.category}</span>
      </div>
      <div className="seperator" />
    </li>
  );
};
export default ListItem;

Answer 1

_renderList 函数应返回一个组件数组(data.list.map... 的结果)。目前，它不返回任何内容。代码需要如下所示:

_renderList(data) {
  if (data !== null) {
    // eslint-disable-next-line
    return data.list.map( (obj) => {
      return <ListItem obj={obj} />;
    });
  }
}