TypeError：无法分配给对象“#<Object>”的只读属性“数量”答案

【问题标题】：TypeError: Cannot assign to read only property 'quantity' of object '#<Object>'TypeError：无法分配给对象“#<Object>”的只读属性“数量”
【发布时间】：2021-09-07 23:24:32
【问题描述】：

我正在尝试修改数组orderedList中obj餐的字段数量。这是错误：

TypeError：无法分配给对象“#”的只读属性“数量”

我怎样才能改变这种状态。

请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。请帮忙。

import {createSlice} from "@reduxjs/toolkit";

const menuList = [
    {
        id: 'm1',
        name: 'Sushi',
        description: 'Finest fish and veggies',
        price: 22.99,
        quantity: 0
    },
    {
        id: 'm2',
        name: 'Schnitzel',
        description: 'A german specialty!',
        price: 16.5,
        quantity: 0
    },
    {
        id: 'm3',
        name: 'Barbecue Burger',
        description: 'American, raw, meaty',
        price: 12.99,
        quantity: 0
    },
    {
        id: 'm4',
        name: 'Green Bowl',
        description: 'Healthy...and green...',
        price: 18.99,
        quantity: 0
    },
];

const initialStateMeals = {
    menuList,
    orderedList: [],
    numberOfOrderedMeals: 0,
    showCart: false,
    totalAmount: 0
}

const counterSlice = createSlice({
    name: 'meals',
    initialState: initialStateMeals,
    reducers: {
        add(state, action) {
            state.numberOfOrderedMeals += +action.payload.input;
            let totalAmountTemp = state.totalAmount + action.payload.meal.price * action.payload.input;
            state.totalAmount = +totalAmountTemp.toFixed(2);

            let mealIsInList = state.orderedList.filter(meal => meal.id === action.payload.meal.id).length > 0;

            if (!mealIsInList) {
                state.orderedList.push(action.payload.meal);
                state.orderedList.filter(meal => meal.id === action.payload.meal.id)[0].quantity = 1;
                //on this line I have this error
                //TypeError: Cannot assign to read only property 'quantity' of object '#<Object>'
            } else {
            }
        },
        remove(state, action) {
            state.numberOfOrderedMeals -= +action.payload.input;
        }
        ,
        closeCart(state) {
            state.showCart = false;
        }
        ,
        showCart(state) {
            state.showCart = true;
        }
    }
});

export default counterSlice.reducer;
export const mealsAction = counterSlice.actions;

【问题讨论】：

标签： reactjs react-redux redux-toolkit

【解决方案1】：

我的猜测是 redux-toolkit 正在保护您不改变操作的 payload 对象，因为这种改变可能会泄漏到任何其他监听相同操作的减速器中。

不要推入数组，然后再次迭代它只是为了找到你推入的元素，这将是数组中的最后一个元素，顺便说一句，你可以创建一个新对象您想要的属性并将其推送到数组中。

if (!mealIsInList) {
  state.orderedList.push({
    ...action.payload.meal,
    quantity: 1,
  });
}

【讨论】：

但不是使用 immer 的 redux 工具包。我们可以改变状态
@AmineDa。是的，使用 RTK 及其底层 ImmerJS 的实现，您可以编写可变的 reducer 函数。这意味着您可以编写改变 state 的 reducer 函数。改变/重新分配动作对象属性仍然是无效的。在 OP 的原始代码中，最后一个数组项是对操作有效负载的引用，因此不可分配。