Добавить элемент в корзину Filter vs Splice ReactJS Javascript

Question

Я приложение, где я могу добавить товар в корзину. На данный момент, если пользователь удаляет элемент из корзины, я использую .filter, чтобы удалить объект basketItem из массива basketItems. Затем я устанавливаюState в этот массив с фильтрованным элементом.

removeItem(msg, data) { 
    let newStateItems = this.state.items.filter((i) => i.id != data.id); 
    this.setState({ 
     items: newStateItems 
    }); 
    this.calculateTotals(); 
} 

Проблема однако в том, что, как только я удалил элемент и затем добавить еще один пункт, новый товар, который создается показывает, как старый пункт, пока страница не обновляется - пример это приложение можно найти here и full repository находится на github.

Надстройка элемент вызова выглядит следующим образом:

addItem(msg, data) { 
    this.state.items.push(data); 
    this.setState({ 
     items: this.props.items 
    }) 
    this.calculateTotals(); 
} 

Как я могу гарантировать, что правильный пункт показывает в корзине?

Answer 1

Хорошо, я думаю, что у вас есть две проблемы:

1. Вы звоните calculateTotals синхронно, то есть до того, как состояние объекта обновляется
2. Вы установка состояния быть this.props .items

Я бы рекомендовал следующее:

removeItem(msg, data) { 
    let newStateItems = this.state.items.filter((i) => i.id != data.id); 
    this.setState({ 
     items: newStateItems 
    }, this.calculateTotals); 
} 

И

addItem(msg, data) { 
    let newStateItems = this.state.items.concat([data]); 
    this.setState({ 
     items: newStateItems 
    }, this.calculateTotals); 
} 

Обратите внимание, как this.calculateTotals теперь отправляется в SetState, который затем вызывает его после обновления состояния, но также, что AddItem теперь устанавливает состояние с помощью модифицированного списка, а не реквизит, как это было раньше (я предполагаю, что это была небольшая опечатка, но, вероятно, она способствовала).

Вот документация для установки состояния: https://facebook.github.io/react/docs/component-api.html#setstate