循环遍历对象并使用地图不会返回 jsx

Lama N 发表于 Dev

喇嘛N

我正在尝试遍历对象的对象并使用 map 列出该项目，并且我正在从 redux 获取此对象。我可以使用 console.log 这个值，但是 jsx 什么都不返回。我尝试删除{}和return使用()only 但它仍然没有渲染任何东西。

我的帖子对象看起来像

posts = { 1: {id: 1, title: "Hello world"} }

组件.js

renderList(){
   const { posts } = this.props;
   Object.keys(posts).map(key => {
     console.log(`${key} and ${posts[key].title}`);
     return (
       <li key={key} className="list-group-item">
          {posts[key].title}
       </li>
     );
   });
}

render(){
    return (
      <div>
        <h2>Posts</h2>
        <ul className="list-group">{this.renderList()}</ul>
      </div>
    );
}

我无法弄清楚我做错了什么。

丹尼尔施密特

您的 renderList 方法没有 return 语句。根据您的 React 版本，您可以在此处返回一个数组，或者您需要将其包装在一个 div 中（或者在这种情况下将 ul 放入其中）。

renderListOnReact16(){
   const { posts } = this.props;
   return Object.keys(posts).map(key => {
     console.log(`${key} and ${posts[key].title}`);
     return (
       <li key={key} className="list-group-item">
          {posts[key].title}
       </li>
     );
   });
}

renderOnReact16(){
    return (
      <div>
        <h2>Posts</h2>
        <ul className="list-group">{this.renderList()}</ul>
      </div>
    );
}

renderListOnReact15(){
   const { posts } = this.props;
   return (
     <ul className="list-group">
      {Object.keys(posts).map(key => {
         console.log(`${key} and ${posts[key].title}`);
         return (
           <li key={key} className="list-group-item">
            {posts[key].title}
           </li>
         );
     })}
   );
}

renderOnReact16(){
    return (
      <div>
        <h2>Posts</h2>
        {this.renderList()}
      </div>
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。