Reactjs React：在开关返回中调用setState的语法

很难弄清楚我在这里做错了什么。。我肯定我错过了一些简单的东西。只要传入此开关调用的数据与每个类别匹配，就尝试在状态上递增计数器，但由于某些原因，计数器不会递增

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

我也试过这样做，但我不认为我用这种方式来称呼“this”：

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

（

this

的值就是组件），在第一个代码中，您可以将映射函数更改为箭头函数，这样它就保留了

countCategories

函数的

this

值。我注意到的另一件奇怪的事情是，您正在通过返回应该更改状态的函数来创建函数数组，而不是实际更改状态：

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

---

这里需要考虑的一个重要因素是

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

有关详细信息，请参见中的注释

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。当计算完成时。当调用

countCategories

时，避免在循环或迭代中设置状态，如（…）setState（）

？首先计算值，然后设置它。。