当使用地图函数中的状态在 React JS 中更改一个项目值时，如何动态更新购物车中的值？

Question

我在 REACT 中有一个购物车组件，其中选择的产品要添加到购物车中并将它们的 ID存储在本地存储中。 现在结帐前，车显示其拥有所有产品的详细信息（名称，单价，数量，totalPrice）用户已添加。 最初，对于购物车中的所有产品和数量输入字段中显示在每个产品前面的所有产品，数量为 1，用户可以在此处增加/减少数量。 有一个 Total Price 列应该在数量发生变化时更新**(unitPrice*Qty).**

我正在使用map () 函数来显示购物车中的所有产品。 但是，当我对一个产品的更新数量，它更新TotalPrice的所有产品，而不只是特定之一。 我知道这是因为onChange事件我将 Qty 值存储在 state 中并将其与 UnitPrice相乘，以便为所有人执行此操作。

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

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

 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" alt="abc" /> </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> ); } }

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

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

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