Question

我已经开始学习React，并决定创建我的第一个类似于在线食品订购车的应用程序。

我的问题开始于在购物车中访问特定菜品当前编号的状态（如果我要订购2个披萨，它将在购物车中显示“ 2x Pizza”）。

由于我真的不想使用if方法，因为这会使我的代码不太专业，所以我想问你是否知道如何解决我的问题。

我目前所拥有的就是那部分代码：

this.state = {
  values: {
   pizza:0
  }
 }


<div className="item" onClick={(e) => this.addItem(e)} itemprice={1250} foodtype="values.pizza"><p className="itemDesc">Pizza</p></div>

addItem(e) {
   let foodType = clickObj.getAttribute("foodtype"); // values.pizza

    this.setState({
        [foodType]: [foodType] + 1
    });
}

我希望每次单击按钮时都将this.state.value.pizza增加1。我必须使用属性名称指定变量，因为要订购的位置很多，并且我希望代码尽可能整洁。

不幸的是，我可以访问该状态，但是单击后该状态的值不会更改。（使用console.log检查）

Answer 1

如果要使用以前的状态值递增，则可以使用以下代码。

this.setState(prevState => ({[foodType]: prevState[foodType] + 1}))

您还可以对Chrome使用https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en扩展名，它会为您提供有关状态和其他值的详细信息。

希望能回答您的问题。

使用变量访问状态

1 个答案: