Цикл по объекту и использование карты не возвращает jsx

Question

Я пытаюсь перебрать объект объектов и использую карту для отображения списка, и я получаю этот объект из редукса.Я могу console.log значение, но jsx ничего не возвращает.Я попытался удалить {} и return и использовать только (), но все равно ничего не рендерится.

Мой объект сообщений выглядит как

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

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

Я не могу понять, что я делаю неправильно.

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