Question

我试图遍历对象的对象，并使用map列出项目，然后从redux获取该对象。我可以用console.log值，但是jsx不返回任何值。我尝试删除PlayerID Date Rating 1: 1 2012-04-01 71 2: 2 2012-04-05 73 3: 2 2012-04-20 81 4: 3 2012-04-23 NA 5: 3 2012-04-30 NA和{}并仅使用return，但仍然无法呈现任何内容。

我的帖子对象看起来像

()

Component.js

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

我不知道自己在做什么错。

Answer 1

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

遍历对象并使用map不会返回jsx

1 个答案: