Как динамически обновлять значения в Корзине покупок, когда в React JS изменяется значение одного элемента, используя состояние в функции карты? - PullRequest
Новая
       35

Как динамически обновлять значения в Корзине покупок, когда в React JS изменяется значение одного элемента, используя состояние в функции карты?

0 голосов
/ 09 апреля 2019

У меня есть корзина для покупок Компонент в РЕАКТЕ, где я выбираю продукты для добавления в корзину и сохраняю их идентификаторы в локальном хранилище .Теперь перед оформлением заказа отображается корзина со всеми деталями товара ( название , единица цена , кол-во , всегоЦена ) Пользователь добавил.Первоначально Кол-во равно 1 для всех внутри поля ввода количества напротив каждого продукта, где пользователь может увеличивать / уменьшать Кол-во.Существует столбец «Общая цена», который следует обновлять при каждом изменении кол-ва ** (unitPrice * Qty). **

Я использую функцию map () для отображения всех товаров в корзине.Но когда я обновляю Qty для одного продукта, он обновляет TotalPrice для всех продуктов, а не только для этого конкретного.Я знаю, что это событие becoz onChange Я сохраняю значение Qty в состоянии и умножаем на 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>
  ); }
  
}

Пожалуйста, помогите мне, как обновить цену конкретного товара при изменении поля ввода Qty.Спасибо.

1 Ответ

0 голосов
/ 09 апреля 2019

Если вы хотите изменить цену конкретного товара, вам следует изменить цену этого товара.В этом случае вы меняете глобальное состояние цены.

Просто сделайте это.

у вас есть массив объектов в состоянии, т.е. 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
 })
}

Теперь в этом вы передадите индекс того конкретного элемента массива, в котором вы действительно хотите изменить цену.следовательно, это изменит цену этого конкретного объекта (предмета).

...