React博客应用中合并字典相同键值至同一列表的实现问题

正确实现代码 #

直接对原始response进行分组处理，无需先生成重复的filteredResponse：

function App(response) {
  const groupedBlogs = Object.values(
    response.reduce((acc, item) => {
      // 初始化当前type的分组对象
      if (!acc[item.type]) {
        acc[item.type] = { type: item.type, blogs: [] };
      }
      // 将博客标题加入对应分组的数组
      acc[item.type].blogs.push(item.blog_title);
      return acc;
    }, {})
  );

  console.log(groupedBlogs);
  return null;
}

代码说明 #

1. 使用reduce分组：reduce方法适合这类聚合操作，用一个对象作为累加器（acc），键为博客的type，值为包含type和blogs数组的目标对象。
2. 初始化分组：如果当前type在累加器中不存在，就创建新的分组对象并初始化空的blogs数组。
3. 收集标题：将当前博客的blog_title推入对应分组的blogs数组。
4. 转换为数组：用Object.values把累加器中的值提取为数组，得到期望的格式。

原代码问题分析 #

• 最初的filteredResponse逻辑会把每个匹配blogTypes的元素单独生成一个对象，导致同一个type重复出现，这是后续分组失败的根源。
• 尝试的Map方法错误地用blog_title作为键，而非用type作为分组依据，完全搞反了分组逻辑，因此得到错误输出。

内容的提问来源于stack exchange，提问作者Xmas