Redux Toolkit修改orderedList中quantity属性报只读错误如何解决

云上老周

2026-10-4

错误原因

这个只读报错是Redux Toolkit内置的Immer库的特性导致的：

Immer仅会对原本归属于Redux state的对象生成可修改的代理对象，你代码里用到的action.payload.meal是从外部传入的对象，不属于初始state的原生内容，不会被Immer处理为可写代理，本身处于冻结的只读状态，直接修改它的quantity属性就会抛出错误。
你现有代码中push元素后再用filter查找修改的写法冗余且存在不必要的性能损耗，也可以同步优化。

修复方案

只需要在把餐品加入orderedList前先浅拷贝一份餐品对象，给拷贝后的对象赋值对应数量后再加入数组即可，修改后的完整add reducer代码如下：

add(state, action) {
    const { input, meal } = action.payload;
    const purchaseCount = +input;
    state.numberOfOrderedMeals += purchaseCount;
    const totalAmountTemp = state.totalAmount + meal.price * purchaseCount;
    state.totalAmount = +totalAmountTemp.toFixed(2);

    // 用find代替filter，匹配到目标后立即停止遍历，性能更优
    const existingMeal = state.orderedList.find(item => item.id === meal.id);
    if (!existingMeal) {
        // 浅拷贝原始meal对象，设置数量后再加入数组，避免修改只读的原始对象
        state.orderedList.push({
            ...meal,
            quantity: purchaseCount
        });
    } else {
        // 已存在的餐品对象是Immer代理的可写对象，可直接修改属性
        existingMeal.quantity += purchaseCount;
    }
}