Оператор распространения не работает с функцией добавления в корзину в React Redux - PullRequest
Новая
       72

Оператор распространения не работает с функцией добавления в корзину в React Redux

0 голосов
/ 11 июля 2020

Я пытаюсь добавить товар в корзину через React & Redux, вот моя функциональность состояния

Исходное состояние 

const initialState = {
    error: false,
    products: [],
    addedItems: [],
    total: 0
}

Добавить в функция тележки 

case actionTypes.ADD_TO_CART:
    let addedItem = state.products.find(item => item._id == action.id)
    let existed_item 
    if(state.addedItems){
        existed_item = state.addedItems.filter(item => action._id == item.id)
    }
    if(existed_item){
        addedItem.quantity += 1
        return {
            ...state,
            total: state.total + parseFloat(addedItem.price)
        }
    } else {
        addedItem.quantity = 1;
        let newTotal = state.total + parseFloat(addedItem.price)
        return {
            ...state,
            ...{addedItems: [...state.addedItems, addedItem]}, //error in here
            total: newTotal
        }
    }

Но показывает эту ошибку ниже:

TypeError: недопустимая попытка распространения не повторяемого экземпляра. Чтобы быть итерируемыми, объекты, не являющиеся массивами, должны иметь метод Symbol.iterator.

Я также пробовал вот так 

...{addedItems: [...(initialState.addedItems), addedItem]}

, и он добавляет только один элемент в корзину , не нажимаю новый элемент.

Что я здесь сделал не так? Я действительно не понимаю почти 3 часа.

Я очень признателен, если вы мне поможете.

Спасибо

1 Ответ

0 голосов
/ 11 июля 2020

Во-первых, оператор внешнего распространения не нужен. Во-вторых, вы пытаетесь поместить добавленные элементы в объект, однако это часть initialState, а не часть вложенного объекта внутри initialState.

Итак, это то, что вы хотите, 

return {
            ...state,
            addedItems: [...state.addedItems, addedItem], 
            total: newTotal
        }


const initialState = {
  error: false,
  products: [],
  addedItems: [],
  total: 0
}

let result = {
  ...initialState,
  addedItems: [...initialState.addedItems, 1],
  total: 1
}

console.log(result)
...