Реакция: Синтаксис для вызова setState в Switch Return

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

Предполагая, что вы вызываете countCategories, связанный с компонентом (значение this является компонентом), в свой первый код, который должен работать, вы могли бы изменить функцию отображения на функцию стрелки, поэтому он сохраняет значение 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); 

Смотрите примечания в пределах Component API documentation для деталей

Answer 3

Просто сделай этот чувак:

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) 

Важно здесь, чтобы SetState 1. один раз, 2. когда вычисление завершено. Избегайте установки состояния в циклах или итерациях, например for(...) setState()