Redux实现add_to_cart功能时报非可迭代实例错误该如何解决？

报错原因 #

你的cardItems reducer存在两处核心逻辑错误，直接触发该类型错误：

• 初始state是对象结构{cardData: [], totalPrice: 0}，但你在ADD_TO_CART分支错误返回数组结构，前后state格式不匹配
• 你使用数组展开语法...展开对象类型的state，对象不属于JavaScript可迭代实例，不符合数组展开的语法要求，因此直接抛出该错误。

修复方案 #

修改cardItems reducer的ADD_TO_CART分支逻辑，保持state始终为对象结构，正确展开更新购物车数组和总价：

import { ADD_TO_CART } from '../constants'

const initialState = {
    cardData: [],
    totalPrice :0
}
export default function cardItems(state = initialState, action) {
    switch (action.type) {
        case ADD_TO_CART:
            return {
                // 先展开原state的所有属性，保持结构一致
                ...state,
                // 展开原有购物车数组，追加新传入的商品价格
                cardData: [...state.cardData, action.data],
                // 累计更新购物车总价
                totalPrice: state.totalPrice + action.data
            }
        default:
            return state
    }
}

补充说明 #

当前你仅传入了商品价格到购物车数组，如果后续需要存储商品ID、名称等完整信息，修改首页调用addToCartHandler的传参为完整item对象即可，无需修改reducer的核心结构。

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