Artikel zum Warenkorb hinzufügen Filter vs Splice ReactJS Javascript

Question

Ich bin eine App, wo ich ein Produkt in einen Warenkorb hinzufügen kann. Wenn der Benutzer einen Artikel aus dem Warenkorb entfernt, verwende ich .filter, um das Objekt "basketItem" aus dem Array "basketItems" zu entfernen. Ich setze dannState auf dieses Array mit dem gefilterten Element. jedoch

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

Das Problem ist, dass wenn ich ein Element entfernt und anschließend ein weiteres Element hinzufügen gehen, um das neue Element, das zeigt, wie das alte Element erstellt wird, bis die Seite aktualisiert wird - ein Beispiel dieser App kann gefunden werden here und die full repository ist auf GitHub.

Der Aufruf Add Artikel sieht wie folgt aus:

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

Wie kann ich sicherstellen, dass die richtige Ware in dem Warenkorb zeigt?

Answer 1

Ok, ich glaube, Sie haben zwei Probleme:

1. Du nennst calculateTotals synchron, das heißt, bevor die Statusobjekt aktualisiert wird
2. Sie den Zustand Einstellung this.props zu sein .items

würde ich folgendes empfehlen:

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

UND

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

Beachten Sie, wie this.calculateTotals jetzt setState gesendet wird, das nennt es dann nach dem Staat zu aktualisieren, sondern auch, dass addItem jetzt setzt den Zustand eine modifizierte Liste und nicht mit die Requisiten wie es vorher war (ich nehme an, das war ein kleiner Tippfehler, aber es hat wahrscheinlich dazu beigetragen). Hier

ist die Dokumentation zur Einstellung Zustand: https://facebook.github.io/react/docs/component-api.html#setstate