javascript - 如何显示群组消息

Question

请帮助我，我是 react 新手。我正在渲染嵌套对象的值。每个对象都有标题和消息属性。标题可以相同。我想在标题下显示消息。如果标题与之前的对象相同，则不显示它，仅显示一次。但就我而言，它显示在每条消息之后。

我的对象:

arrayOfMessages=[
  {
    title: 'cars',
    message: 'toyota'
  },
  {
    title: 'cars',
    message: 'ford'
  },
  {
    title: 'cars',
    message: 'bmw'
  },
  {
    title: 'bikes',
    message: 'suzuki'
  },
  {
    title: 'bikes',
    message: 'bmw'
  },
]

预期输出:

   title
     message
     message
     message

   title2
     message
     message

就我而言:

   title
     message
   title
     message
   title
     message

   title2
     message
   title2
     message

<div>
          {arrayOfMessages.map((item, idx) => {
            const {
              message,
              title
            } = item
            return (
              <div key={idx} className="message-content">
                <p>{title}</p>
                <p>{message}</p>
              </div>
            )
          })}
        </div>

Answer 1

一种方法是通过 title 字段对 arrayOfMessages 的项目进行分组，以使用 native .reduce() 实现所需的渲染结果方法:

const arrayOfMessages=[
  {
    title: 'cars',
    message: 'toyota'
  },
  {
    title: 'cars',
    message: 'ford'
  },
  {
    title: 'cars',
    message: 'bmw'
  },
  {
    title: 'bikes',
    message: 'suzuki'
  },
  {
    title: 'bikes',
    message: 'bmw'
  },
];

/* Use reduce() to group items of arrayOfMessages by title */
const groupedMessages = arrayOfMessages.reduce((groups, item) => {
  
  /* Find group for the title of current item */
  const group = groups.find(group => group.title === item.title);
  
  /* If matching group found, add message of item to it's messages array */
  if(group) {
    group.messages.push(item.message);
  }
  /* Otherwise, add a new group for this title */
  else {
    groups.push({ title : item.title, messages : [] });
  }

  return groups;
  
}, [])

console.log(groupedMessages);

使用上面的代码，您可以修改 render() 方法，为每个项目类别渲染一次 title:

<div>
    { groupedMessages.map((group, idx0) => (<div key={idx0} className="message-content">
        <h2>{ group.title }</h2>
        { group.messages.map((message, idx1) => (<p key={idx1}>{message}</p>)) }        
        </div>))
    }
</div>

希望有帮助!