Javascript 当一个商品的价值在使用地图功能中的状态时，如何在React JS中动态更新购物车中的价值？

我在REACT中有一个购物车组件，其中要添加到购物车中的选定产品将其ID存储在本地存储中。现在在结账之前，将显示购物车，其中包含用户添加的所有产品详细信息（名称，单位价格，数量，总价）。最初，Qty对于购物车和数量输入字段中显示在每个产品前面的所有产品为1，用户可以在其中增加/减少数量。当数量发生变化**（单价*数量）时，应更新总价列**

我正在使用map（）功能显示购物车中的所有产品。但当我更新一种产品的数量时，它会更新所有产品的总价格，而不仅仅是那个特定的产品。我知道这是因为onChange事件我将数量值存储在状态中，并将其与单价相乘，因此它将对所有人执行此操作

注意：我没有为此使用Redux/Flux

我不知道如何在map（）函数中处理这个问题。我应该为此使用索引吗？ 以下是购物车组件：

导出默认类购物车扩展组件
{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
客户：''，
转发者：错，
购物车：[]，
项目：[]，
数量：“”
};
this.onChangeQty=this.onChangeQty.bind（this）；
}
componentDidMount（）{
检索到的常量=localStorage.getItem（“cartItem”）；
const arr=JSON.parse（已检索）；
轴心柱http://localhost/Auth/api/customers/show_cart.php'啊,，
{标题：{'Accept'：'application/json，text/plain，*/*'，
“内容类型”：“应用程序/json”}
} )
。然后（响应=>{
log（“API响应，购物车中的项目为：”）；
日志（响应、数据、记录）；
这是我的国家({
cartItems:响应.数据.记录
});      })
.catch（错误=>{
如果（错误）{
log（“错误无法显示本地存储中的购物车项目”）；}）；
}
变更数量（e）
{
这是我的国家({
数量：e.目标值
})
}
render（）
{
返回(
你的购物车

项目#
形象
身份证件
名称
单价
量
总价
{this.state.cartItems.map（（项，i）=>
{i}
{item.SparePartID}
{item.Name}
{item.Price}
{item.Price*this.state.qty}
)}



); }
}

如果您想更改特定商品的价格，则应更改该特定商品的价格值。在本例中，您正在更改价格的全局状态

就这么做吧

您有一个处于状态的对象数组，即this.state.cartItems

现在，在映射函数中，您正在更改价格值，只需更改此值即可

<td className="text-center">

  <h4 key={item.SparePartID}>
  <input className="text-center"
   type="number"
  min="1"
  onChange={(e)=>this.onChangeQty(e,i)}
  />
  </h4>
</td>

now inside that onChangeQuantity function 

onChangeQty(e, index){
 const {cartItems} = this.state;
 cartItems[i].Price = e;
 this.setState({
  cartItems
 })
}

这个.onChangeQty（e，i）}
/>
现在在onChangeQuantity函数中
变更数量（e，索引）{
const{cartimes}=this.state；
cartItems[i].价格=e；
这是我的国家({
手推车
})
}

现在在这里，您将传递您真正想要更改价格的特定数组项的索引。因此，它将改变该特定对象（项目）的价格