Javascript 如何在react js中更新多个状态

我不确定这个问题的题目对不对。我遇到了一些问题，我不知道如何解决它们

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

在我的应用程序有购物车页面有项目列表。并且每个项目都有一个字段quantity.可以更新。我在这里的问题是，当我启动时，我声明了数量，并从中生成了两个增加和减少数量的函数。但问题是，当我单击addQuantity时，它会同时更新所有产品的数量。我真的不知道该怎么解决这个问题，这几天我一直在想办法。 这是两项

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

这是我的密码

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

类CartContainer扩展了React.Component{ 状态={ 数量：1， })

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

组件安装{ this.props.getItemsAddedToCart； }

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

渲染{

const addItem = () => {
  this.setState({
    quantity: this.state.quantity + 1,
  });
};

const removeItem = () => {
  this.setState({
    quantity: this.state.quantity - 1,
  });
};

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

Cart.js

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

返回cartData.mapitem，索引=>{ 回来

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

CartItemDetail.js

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

---

任何帮助都将是巨大的，我真的想弄清楚这一点。

像下面这样声明您的状态

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

state={
quantity:{}
}

使用产品id或独特的东西来制作数量键

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

const addItem = (id) => {
  this.setState({
    quantity: {
     ...this.state.quantity,
     [id]:this.state.quantity[id]+1
     }
  });
};

const removeItem = (id) => {
  this.setState({
    quantity: {
     ...this.state.quantity,
     [id]:this.state.quantity[id]-1
     }
  });
};

---

像下面一样声明您的状态

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

state={
quantity:{}
}

使用产品id或独特的东西来制作数量键

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

const addItem = (id) => {
  this.setState({
    quantity: {
     ...this.state.quantity,
     [id]:this.state.quantity[id]+1
     }
  });
};

const removeItem = (id) => {
  this.setState({
    quantity: {
     ...this.state.quantity,
     [id]:this.state.quantity[id]-1
     }
  });
};

---

在您的状态中，数量只保留一个值，因此cart.js呈现的所有购物车项目都使用相同的值

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

您需要跟踪购物车中每个商品的数量，以下是每个商品的状态设置示例：

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

此.state={ 项目：[ { id:1， 名称：牛仔裤， 数量：1 }, { id:2， 姓名:夹克,， 数量：2 } ] }; 以及增加和减少项目的功能

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

increaseItemQuantityid{ 返回=>{ const itemIndex=this.state.items.findIndexitem=>item.id==id； const nextItems=Array.fromthis.state.items； console.logitemIndex； nextItems[itemIndex]。数量=nextItems[itemIndex]。数量+1； 这个.setState[…nextItems]； }; } decreaseItemQuantityid{ 返回=>{ const itemIndex=this.state.items.findIndexitem=>item.id==id； const nextItems=Array.fromthis.state.items； console.logitemIndex； nextItems[itemIndex]。数量=数学.max 1. nextItems[itemIndex]。数量-1 ; 这个.setState[…nextItems]； }; } 这可以做得更干净，但我把它作为演示的目的

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

然后在渲染中：

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

渲染{ 回来 {this.state.items.mapitem，索引=> {item.name}x{item.quantity} 减少 增长 } ; }

---

请在此处尝试：

在您的状态中，数量只保留一个值，因此cart.js呈现的所有购物车项目都使用相同的值

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

您需要跟踪购物车中每个商品的数量，以下是每个商品的状态设置示例：

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

此.state={ 项目：[ { id:1， 名称：牛仔裤， 数量：1 }, { id:2， 姓名:夹克,， 数量：2 } ] }; 以及增加和减少项目的功能

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

increaseItemQuantityid{ 返回=>{ const itemIndex=this.state.items.findIndexitem=>item.id==id； const nextItems=Array.fromthis.state.items； console.logitemIndex； nextItems[itemIndex]。数量=nextItems[itemIndex]。数量+1； 这个.setState[…nextItems]； }; } decreaseItemQuantityid{ 返回=>{ const itemIndex=this.state.items.findIndexitem=>item.id==id； const nextItems=Array.fromthis.state.items； console.logitemIndex； nextItems[itemIndex]。数量=数学.max 1. nextItems[itemIndex]。数量-1 ; 这个.setState[…nextItems]； }; } 这可以做得更干净，但我把它作为演示的目的

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

然后在渲染中：

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

渲染{ 回来 {this.state.items.mapitem，索引=> {item.name}x{item.quantity} 减少 增长 } ; }

---

在这里尝试：

你能创建一个允许我们使用工作示例的CodeSandbox吗？是的，给我一分钟，我会尝试。@Titlum这是一个大应用程序，我无法将它添加到Sandboxy。你不应该将你的完整应用程序添加到CodeSandbox，只有一个小的工作示例，允许我们重现你的问题。你能创建一个允许我们使用的CodeSandbox吗使用一个工作示例

      <Grid item xs={4} container justify="space-around">
        <CartItemDetails
          quantity={quantity}
          addItem={addItem}
          removeItem={removeItem}
          addQty={addQuantity}
          subQty={subtractQuantity}
          cart={item}
        />
      </Grid>
    </Grid>
  </Grid>
);

---

？是的，请给我一分钟，我会尝试。@Titlum这是一个大应用程序，我无法将其添加到Sandboxy。您不应该将完整的应用程序添加到CodeSandbox，这只是一个小的工作示例，允许我们重现您的问题。我如何使用redux state执行此操作？如何使用redux state执行此操作？