使用reduce合并同ID的topic对象，点击按钮才追加对应article

一、你的reduce里find返回undefined的原因 #

• 累加器初始值未设置为空数组，导致第一次循环时累加器无数据，find自然找不到匹配项；
• find的匹配条件存在类型不匹配问题（比如id一个是字符串、一个是数字），导致无法匹配到同ID项；
• 若未给reduce传初始值，累加器默认取数组第一个元素，后续循环的匹配逻辑会完全混乱，也会出现find返回undefined的情况。

二、用reduce直接完成合并（无需后续去重） #

假设你的topic数组结构为[{id: 1, article: '内容1'}, {id:1, article: '内容2'}, ...]，直接用reduce完成合并的代码如下：

const mergedTopics = topics.reduce((acc, current) => {
  const existingItem = acc.find(item => item.id === current.id);
  if (existingItem) {
    // 找到同ID项，将当前article推入数组
    existingItem.article.push(current.article);
  } else {
    // 未找到则新增项，将单个article转为数组存入
    acc.push({
      ...current,
      article: [current.article]
    });
  }
  // 必须返回累加器，否则下一次循环的acc会是undefined
  return acc;
}, []); // 初始值必须传空数组，这是核心前提

你的另一段reduce返回undefined，大概率是忘记在回调函数里return累加器，或者初始值未正确设置为空数组，导致累加器在循环中丢失，最终返回undefined。

三、点击按钮的切换逻辑实现 #

// buttonValue作为开关，true=合并显示，false=显示原数据
function handleToggle(buttonValue) {
  let result;
  if (buttonValue) {
    // 执行合并逻辑
    result = topics.reduce((acc, current) => {
      const existing = acc.find(item => item.id === current.id);
      existing ? existing.article.push(current.article) : acc.push({...current, article: [current.article]});
      return acc;
    }, []);
  } else {
    // 未点击时返回原数组（浅拷贝避免修改原数据）
    result = [...topics];
  }
  // 这里将result渲染到页面即可
  console.log(result);
}

补充：reduce基础工作原理 #

reduce的核心是用累加器逐步处理数组每一项：

1. 第一个参数是回调函数，接收累加器acc、当前项current、索引、原数组；
2. 第二个参数是累加器的初始值，必须传对（比如合并场景传空数组），否则逻辑会偏离预期；
3. 回调函数必须return累加器，否则下一次循环的acc会变成undefined。

内容的提问来源于stack exchange，提问作者elo-ly