当 React JS 中的一项值使用地图函数中的状态发生变化时，如何动态更新购物车中的值？

Posted 2023-02-23

【中文标题】当 React JS 中的一项值使用地图函数中的状态发生变化时，如何动态更新购物车中的值？

【英文标题】：How to dynamically update values in Shopping Cart when one item value is changing in React JS using state in map function?

【发布时间】：2019-08-31 00:47:23

【问题描述】：

我在 REACT 中有一个购物车组件，其中选定的产品要添加到购物车中，并将它们的 ID 存储在 本地存储中。现在在结帐之前，会显示包含所有产品详细信息的购物车（name、unit price、qty、totalPrice) 用户已添加。最初 Qty 为 1 用于购物车和数量输入字段中显示在每个产品前面的所有产品，用户可以在其中增加/减少数量。有一个总价列，应在数量更改时更新**(unitPrice*Qty)。**

我正在使用 ma​​p() 函数来显示购物车中的所有产品。但是，当我为一种产品更新数量时，它会更新所有产品的 TotalPrice 而不仅仅是那个特定的产品。我知道这是因为 onChange 事件我将 Qty 值存储在 state 中并将其与 UnitPrice multiply 相乘，所以它为所有人做这件事。

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

我不确定如何在 ma​​p() 函数 中处理这个问题。我应该为此使用索引吗？ 这是购物车组件：

export default class Cart extends Component

  constructor(props) 
      super(props);

      this.state = 
        data:[],
        customer: '',
        redirectToReferrer: false,
        cart: [],
        cartItems: [],
        qty: ''

      ;
      
      this.onChangeQty = this.onChangeQty.bind(this);



componentDidMount() 


    const retrieved = localStorage.getItem("cartItem");
    const arr = JSON.parse(retrieved);

    axios.post('http://localhost/Auth/api/customers/show_cart.php', arr,
   headers: 'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json'
  )
    .then(response => 
      console.log("API response, Items in Cart are: ");
      console.log(response.data.records);
      this.setState(
             cartItems :response.data.records
           );      )
     .catch(error => 
     if (error) 
       console.log("Error Can't Show Cart Itemsfrom local Storage");       );


onChangeQty(e)


this.setState(
  qty: e.target.value
)




  render()
  

    return (
<div>
<MiniDrawer  />

<div id="profileDiv">


<Row style= width: "100%">
<Col sm="12" md="12" lg="12" >
<Card> <CardBody> <Row>

<Col md="12" lg="12" sm="12" xs="12">
<h1> <b> Your Shopping Cart </b>  </h1>
<hr/>
<Table>
<thead>
    <tr className="text-center">

        <th> Item# </th>
        <th> Image </th>
        <th> ID</th>
        <th> Name</th>
        <th> Unit Price </th>
        <th> Quantity </th>
        <th> Total Price </th>

    </tr>

</thead>

<tbody>

this.state.cartItems.map( (item, i) =>

  <tr>

    <td className="text-center">
      <h4 key=i> i</h4>
    </td>

    <td className="text-center">
    <Image src="data:image/png[jpg];base64," +  item.Image
     id="cartImage"  />
    </td>

    <td className="text-center">
      <h4 >item.SparePartID</h4>
    </td>

    <td className="text-center">
      <h4 >item.Name</h4>
    </td>

    <td className="text-center">
      <h4>item.Price </h4>
    </td>

    <td className="text-center">
    
      <h4 key=item.SparePartID>
      <input className="text-center"
       type="number"
      min="1"
      onChange=this.onChangeQty
      />
      </h4>
    </td>

    <td className="text-center">
      <h4 key=item.SparePartID>
      item.Price*this.state.qty
      </h4>
    </td>

  </tr>
)
  </tbody>
</Table> </Col> </Row>
</CardBody></Card> </Col></Row>

<br/><hr/><br/>

</div> </div>
  ); 
  

请帮助我如何在数量输入字段更改时更新特定商品的价格。谢谢。

【参考方案1】：

如果您想更改特定商品的价格，则应更改该特定商品的价格值。在这种情况下，您正在更改价格的全局状态。

就这样做吧。

您有一组处于状态的对象，即 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
 )

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