添加商品到购物车时无法增加数量 报Cannot read properties of undefined错误

问题成因 #

你遇到的Cannot read properties of undefined (reading 'length')报错，本质是你在Cart.js中调用length属性的目标变量为undefined，结合redux购物车的场景，90%以上的概率是购物车数组没有正确初始化或者取值路径错误。

排查&解决步骤 #

• 第一步：先定位Cart.js中调用length的代码行，确认调用length的是不是绑定的redux购物车数组（比如props.cart.length或者cart.length）
• 第二步：检查对应redux reducer的初始值配置，必须给购物车数组设置默认空数组，示例正确写法：

// cart reducer 初始值配置
const initialState = {
  cart: [], // 这里不能写undefined、null，必须初始化空数组
  // 其他state字段...
}

• 第三步：检查组件内获取redux购物车的取值路径是否匹配你的store结构，如果用了combineReducers注册cart reducer，注意不要漏层级：

// 示例：如果注册reducer时的写法是 combineReducers({cart: cartReducer})
// 组件内useSelector取值就要写两层
const cart = useSelector(state => state.cart.cart)
// 如果路径写错比如写为state.cart，拿到的是整个reducer对象，不是购物车数组；如果漏写错写层级就会拿到undefined

• 第四步：核对添加商品的reducer逻辑，确保修改购物车时始终返回数组类型，不要出现把cart字段赋值为非数组的情况，添加购物车数量的正确逻辑参考：

case 'ADD_TO_CART':
  // 先判断购物车是否已有该商品
  const existedItem = state.cart.find(item => item.id === action.payload.id)
  if (existedItem) {
    // 已有商品就修改对应商品的数量
    return {
      ...state,
      cart: state.cart.map(item => {
        return item.id === action.payload.id ? {...item, quantity: item.quantity + 1} : item
      })
    }
  } else {
    // 没有商品就新增条目，初始数量为1
    return {
      ...state,
      cart: [...state.cart, {...action.payload, quantity: 1}]
    }
  }

• 临时兼容方案：可以在调用length的地方加可选链操作符规避报错，比如cart?.length，即使cart为undefined也不会抛出异常阻断页面渲染。

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