React-Redux加购触发state.items is not iterable错误如何解决

报错本质：执行[...state.items , action.payload]代码时，state.items为非可迭代类型（常见为undefined、null），无法使用展开运算符导致报错。 #

修复步骤 #

步骤1：修改reducer的addToBasket逻辑 #

reduxsauce的createReducer会自动传入当前state，不需要给state手动设置INITIAL_STATE默认值，同时给state.items加空数组兜底，避免非数组场景报错：

// 修改前
export const addToBasket = (state = INITIAL_STATE, action) => ({ ...state, items: [...state.items , action.payload]});

// 修改后
export const addToBasket = (state, action) => ({ 
  ...state, 
  items: [...(state.items ?? []), action.payload]
});

步骤2：排查其他操作items的逻辑 #

检查项目中是否存在其他修改购物车items的逻辑，比如清空购物车、同步购物车的相关handler，确认这些逻辑不会把items赋值为undefined、null或者其他非数组类型。

步骤3：定位异常值（可选） #

如果修复后问题仍存在，可在addToBasket中增加日志打印，确认触发报错时state.items的具体值，反向定位是哪段逻辑修改了items的类型：

export const addToBasket = (state, action) => {
  console.log('当前items值：', state.items)
  return {
    ...state,
    items: [...(state.items ?? []), action.payload]
  }
};

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