обновление значения ключа одного объекта в массиве объектов реагирует на состояние избыточности - PullRequest
Новая
       8

обновление значения ключа одного объекта в массиве объектов реагирует на состояние избыточности

1 голос
/ 27 апреля 2019

Я пытаюсь обновить объект и его значение ключа внутри массива, используя реагировать на редукцию, но, поскольку я новичок в реакции и редукции, я не нахожу хороший способ сделать это, а также значение не обновляется до.

Вот мое действие 

export const addIngredientToMenuItemCartA = (menu_item_id,timestamp,ingrediant,ingrediant_type,selectedMenuItemIngrediantType)
=> async dispatch => {

    dispatch({
        type: ADD_INGREDIENT_TO_MENU_ITEM_CART,
        payload: {
            menu_item_id,
            timestamp,
            ingrediant,
            ingrediant_type,
            ingrediant_category_type_blue: selectedMenuItemIngrediantType
        }
    }); 
};

Вот мой редуктор 

export default function(state=[],action){
    case ADD_INGREDIENT_TO_MENU_ITEM_CART:
                let menu_item_id = action.payload.menu_item_id;
                let ingrediant = action.payload.ingrediant;
                let timestamp = action.payload.timestamp;
                let items1 = state.slice();
                const itemIndexi1 = items1.findIndex(item => item.menu_item_id === menu_item_id);
                if(true){
                    items1[itemIndexi1].ingrediantTotal = ingrediant.price;
                }
                items1[itemIndexi1].ingrediants.push(ingrediant);
                return items1;
            default:
                return state;
        }

У меня есть массив тележки с объектами внутри, и я хочу найтичто конкретные объекты, а затем обновить их, но если я обновлю их в редукторе, то значения не будут изменены в магазине.

1 Ответ

1 голос
/ 27 апреля 2019

Кажется, что вы мутируете объекты. Существует простой шаблон для циклического перемещения по списку и обработки только соответствующего элемента при создании новых объектов без мутаций.

В вашем случае ваш код может выглядеть примерно так: 

case ADD_INGREDIENT_TO_MENU_ITEM_CART: {
    const { menu_item_id, ingrediant } = action.payload;

    const nextState = state.map(item => {
        if (item.menu_item_id !== menu_item_id) {
            // not our item, return it as is
            return item;
        }

        // this is our relevant item, return a new copy of it with modified fields
        return {
            ...item,
            ingrediantTotal: ingrediant.price,
            ingrediants: [
                ...item.ingrediants,
                ingrediant
            ]
        }
    });

    return nextState;
}

Имейте в виду, что Objects и Arrays являются изменяемыми, поэтому мы можем использовать синтаксис (...) или .slice и т. Д.

...