React: Syntax für den Aufruf von setState in Switch Return

Question

Ich habe eine harte Zeit herauszufinden, was ich hier falsch mache .. und ich bin sicher, es ist etwas einfaches, das ich vermisse. Nur versuchen Zähler auf Zustand zu erhöhen, wenn die in diesen Schalter Aufruf übergebenen Daten jede Kategorie übereinstimmt, aber aus irgendeinem Grunde der Zähler nicht inkrementiert ...

countCategories(cart) { 
cart.map(function(item){ 
    switch (item.type) { 
     case "beverage": return() => { this.setState({ 
     countBeverage: this.state.countBeverage + 1 
     }); } 
     case "fruit": return() => { this.setState({ 
     countFruit: this.state.countFruit + 1 
     }); } 
     case "vegetable": return() => { this.setState({ 
     countVegetable: this.state.countVegetable + 1 
     }); } 
     case "snack": return() => { this.setState({ 
     countSnack: this.state.countSnack + 1 
     }); } 
     default: return console.log("unknown category"); 
    }; 
}); } 

ich es auch auf diese Weise versucht, aber ich don‘ t glaube, ich habe einen Verweis auf ‚das‘, wenn ich nenne es so:

countCategories(cart) { 
cart.map(function(item){ 
    switch (item.type) { 
     case "beverage": return this.setState({ 
     countBeverage: this.state.countBeverage + 1 
     }) 
     case "fruit": return this.setState({ 
     countFruit: this.state.countFruit + 1 
     }) 
     case "vegetable": return this.setState({ 
     countVegetable: this.state.countVegetable + 1 
     }) 
     case "snack": return this.setState({ 
     countSnack: this.state.countSnack + 1 
     }); 
     default: return console.log("unknown category"); 
    }; 
}); } 

Vielen Dank für Ihre Hilfe!

Answer 1

Angenommen, Sie countCategories sind Aufruf an die Komponente gebunden (der Wert von this ist die Komponente), in Ihrem ersten Code, der funktionieren soll, könnten Sie die Abbildungsfunktion auf einen Pfeil Funktion ändern, so dass es hält den this Wert der countCategories Funktion. Eine weitere seltsame Sache, die ich bemerkt habe ist, dass Sie eine Reihe von Funktionen sind die Erstellung von Funktionen Rückkehr, die den Zustand ändern sollte, statt Wechsel tatsächlich den Zustand:

countCategories(cart) { 
    // Notice the change in the next line 
    cart.map(item => { 
    switch (item.type) { 
     case "beverage": 
     // Set the state instead of returning a function that sets the state 
     this.setState({ 
      countBeverage: this.state.countBeverage + 1 
     }); 
     break; 
     case "fruit": 
     this.setState({ 
      countFruit: this.state.countFruit + 1 
     }); 
     break; 
     case "vegetable": 
     this.setState({ 
      countVegetable: this.state.countVegetable + 1 
     }); 
     break; 
     case "snack": 
     this.setState({ 
      countSnack: this.state.countSnack + 1 
     }); 
     break; 
     default: 
     console.log("unknown category"); 
     break; 
    }; 
    }); 
} 

Answer 2

Eine wichtige Überlegung dabei ist, dass setState asynchron ist so Sie können den Wert nicht im selben Ausführungszyklus lesen und inkrementieren. Stattdessen würde ich vorschlagen, eine Reihe von Änderungen zu erstellen und sie dann in einem einzigen setState anwenden.

Unten habe ich map verwendet, um über den Warenkorb zu iterieren und die Statuswerte in einer geklonten Kopie des Zustands zu erhöhen (weil this.state als unveränderlich betrachtet werden sollte). Dann wird der Status aktualisiert, sobald er abgeschlossen ist.

let newState = Object.assign({}, this.state); 
cart.map((item) => { 
    // adapt type to state string -> snack to countSnack 
    const type = item.type.replace(/^(.)/, (s) => 'count' + s.toUpperCase()); 
    newState[type] = (newState[type] || 0) + 1; 
}); 

this.setState(newState); 

Siehe Anmerkungen innerhalb Component API documentation für Details

Answer 3

Sie einfach diesen Geck:

let food = [{type: "snack"},{type: "snack"},{type: "snack"},{type: "snack"}, 
      {type: "veggi"},{type: "veggi"},{type: "veggi"},{type: "veggi"}] 

let foodCount = { 
    veggiCount: this.state.veggiCount || 0, 
    snackCount: this.state.snackCount || 0, 
    beefCount: this.state.beefCount || 0, 
    fruitCount: this.state.fruitCount || 0 
}; 

food.map(item => foodCount[item + "Count"]++) 
this.setState(foodCount) 

Das Wichtigste hier ist 1. einmal SetState, 2. wenn die Berechnung abgeschlossen ist. Vermeiden Sie das Setzen des Status in Schleifen oder Iterationen wie for(...) setState()