React/JavaScript复杂Reducer逻辑：使用reduce时报'acc不可迭代'错误的修复方法

你遇到的acc is not iterable错误根因非常明确：
Array.reduce的回调函数必须显式返回每次迭代后的累计值，你当前的写法仅在回调内部对acc做了重新赋值，没有把重新计算后的acc向外返回，导致第一轮迭代结束后，下一轮拿到的累计值实际是undefined，后续执行数组解构操作时自然触发迭代类型错误。

移除多余的acc重新赋值操作，确保每次迭代都返回最新的累计数组即可：

const usersActiveActivities = usersActivities.reduce((acc, userActivitiesArr) => {
  return [...acc, activeActivities.filter((el) => userActivitiesArr.indexOf(el.id) !== -1)];
}, []);

• 「组件内定义临时变量是反模式」是对React写法的误解：只要是基于已有props/state在渲染阶段派生的计算值，定义普通临时变量完全符合React的设计逻辑。如果想要避免重复渲染时的无意义计算，搭配useMemo做计算缓存才是常规解法，完全不需要为了这类纯计算逻辑硬套useState或useReducer。
• 当前需求本质是逐元素的数组映射转换，用Array.prototype.map实现的可读性比reduce更高。reduce更适合需要把数组聚合为非数组类单值的场景，用在这里属于方法的过度使用，同等逻辑的map写法参考：

  const usersActiveActivities = usersActivities.map(userActivitiesArr => 
    activeActivities.filter((el) => userActivitiesArr.indexOf(el.id) !== -1)
  );
  

• useState/useReducer的核心作用是管理跨渲染周期持久存在的可变状态，而纯派生计算的输出随输入固定变化，本身不需要持久化存储，硬接入状态管理反而会引入状态不同步的额外bug。

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