Angular NGRX报错：state.data不可迭代，合并数据失败求助

错误原因 #

你代码里的state.data是对象类型（从你最终要生成的{ [payload.page?.toString() ?? '0']: ... }结构能明确看出来），但你却使用了数组展开运算符...state.data——对象无法被数组展开运算符直接迭代，所以触发了TypeError: state.data is not iterable错误。

解决方案 #

根据你要实现的“按page存储数据，且对应page下追加新数据”的逻辑，修正代码如下：

on(apiActionGroup.success,
  (state, payload) => newState(state, {
    data: {
      ...state.data, // 保留原state.data中已有的所有page数据
      [payload.page?.toString() ?? '0']: [...(state.data[payload.page?.toString() ?? '0'] || []), ...payload.data]
    }
  })
),

关键说明： #

• 先用...state.data展开原对象的所有键值对，避免覆盖已存在的其他page数据
• 针对当前page，先尝试获取原state.data中该page对应的数组：如果不存在（比如第一次加载该page），就用空数组[]兜底，再用数组展开运算符追加payload.data

额外注意 #

检查你的state初始值，确保state.data的初始类型是空对象{}，而不是数组[]或者undefined，否则第一次执行时仍可能出现类型不匹配的问题。

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