如何使用push方法向数组添加对象？购物车Reducer问题求助

你代码里的问题有两个核心点：

1. Array.push()的返回值不是更新后的数组：push方法执行后会返回新数组的长度（数字类型），你把这个长度赋值给addToCart，导致购物车状态从数组变成了数字，这肯定不符合预期。
2. 直接修改原state违反Redux不可变原则：你直接调用state.addToCart.push()修改了原state里的数组，Redux要求必须返回全新的状态对象，不能直接修改原有状态。

下面给你两种不用扩展运算符的正确写法：

写法一：使用concat方法 #

concat会返回一个包含原数组所有元素和新元素的新数组，不会修改原数组：

import { actionTypes } from "../../types/actionTypes";

const cartiState = {
  addToCart: [],
};

export const cartReducer = (state = cartiState, action) => {
  switch (action.type) {
    case actionTypes.ADD_TO_CART:
      // 用concat创建新数组，加入新的购物车项
      const newCart = state.addToCart.concat(action.payload);
      return {
        ...state,
        addToCart: newCart,
      };
    default:
      return state;
  }
};

写法二：先复制原数组再push #

先用slice()创建原数组的浅拷贝（不修改原state），再给拷贝后的数组push新元素：

import { actionTypes } from "../../types/actionTypes";

const cartiState = {
  addToCart: [],
};

export const cartReducer = (state = cartiState, action) => {
  switch (action.type) {
    case actionTypes.ADD_TO_CART:
      // slice()不带参数会返回原数组的浅拷贝
      const newCart = state.addToCart.slice();
      // 给新数组添加元素
      newCart.push(action.payload);
      return {
        ...state,
        addToCart: newCart,
      };
    default:
      return state;
  }
};

这两种写法都满足你的需求：每次点击按钮都能把新项加入购物车，且没有使用扩展运算符，同时符合Redux的状态管理规则。

内容的提问来源于stack exchange，提问作者me at stackoverflow