React：Switch ReturnのsetStateを呼び出すための構文

Question

私がここで間違っていることを理解するのは苦労しています。ただ、データがこのスイッチコールは、各カテゴリに一致しますが、何らかの理由でカウンタがインクリメントしないに渡されるたび状態でカウンタをインクリメントしようとしている...

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"); 
    }; 
}); } 

「私はまた、このようにそれを試してみましたが、私はドントン私は「この」への参照を持っていると思う、私はこのようにそれを呼び出すとき：

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"); 
    }; 
}); } 

はあなたの助けのためにありがとうございました！

Answer 1

あなたが動作するはずです、あなたの最初のコード内のコンポーネント（thisの値がコンポーネントである）、と結合したcountCategoriesを起動していると仮定すると、あなたは矢印関数へのマッピング機能を変えることができるので、this値を保持しますcountCategories機能の

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

ここで考慮すべき重要な点は、setStateがそう非同期であるということです：私が気づいたもう一つの奇妙なことは、あなたが状態を変更すべき機能を返すことによって、機能の配列を作成するのではなく、実際に状態を変更しているということです同じ実行サイクルで値を読み取って値を増やすことはできません。代わりに、一連の変更を作成してから、単一のsetStateに適用することをお勧めします。

以下、私はmapを使ってカートを反復し、複製された状態のコピーに保存されている状態値を増やしました（this.stateは不変であるとみなすべきです）。その後、完了すると状態が更新されます。

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); 

は詳細

Answer 3

ためComponent API documentation内のノートはちょうどこの男を行う参照してください。

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) 

ここで重要なことは、計算が完了したときに一度1.、2。をSETSTATEすることです。ループや反復で状態を設定しないようにするfor(...) setState()