使用反應增加電子商務中的專案功能

我正在嘗試在我的電子商務專案中添加增加專案的功能，但是當我增加一種產品的價值時，它會增加，我該如何以不同的方式處理它，以便它按照我想要的方式作業。（查看 stackblitz 鏈接以獲取作業示例）。

import React, { useState } from 'react';

const products = [
  { id: 1, clothe: 'pant' },
  { id: 2, clothe: 'shirt' },
  { id: 3, clothe: 'coat' },
];

const Cart = () => {
  const [itemCount, setItemCount] = useState(0);

  const increaseItem = () => {
    setItemCount(itemCount   1);
  };
  const decreaseItem = () => {
    setItemCount(itemCount - 1);
  };

  return (
    <div>
      {products.map((item) => (
        <div>
          <div> {item.clothe} </div>
          <button onClick={() => increaseItem()}> </button>
          <span>{itemCount}</span>
          <button onClick={() => decreaseItem()}>-</button>
        </div>
      ))}
    </div>
  );
};

export default Cart;

例如作業鏈接

uj5u.com熱心網友回復：

您可以嘗試為每種產品保持單獨的狀態嗎？

import React, { useState } from 'react';

const Cart = () => {
  const [products, setProducts] = useState([
    { id: 1, clothe: 'pant', count: 0 },
    { id: 2, clothe: 'shirt', count: 0 },
    { id: 3, clothe: 'coat', count: 0 },
  ]);
  const [itemCount, setItemCount] = useState(0);

  const increaseItem = (index, currentCount) => {
    let uProducts = [...products];
    uProducts[index].count = currentCount   1;
    setProducts(uProducts);
  };
  const decreaseItem = (index, currentCount) => {
    let uProducts = [...products];
    uProducts[index].count = currentCount - 1;
    setProducts(uProducts);
  };

  return (
    <div>
      {products.map((item, index) => (
        <div>
          <div> {item.clothe} </div>
          <button onClick={(e) => increaseItem(index, item.count)}> </button>
          <span>{item.count}</span>
          <button onClick={(e) => decreaseItem(index, item.count)}>-</button>
        </div>
      ))}
    </div>
  );
};

export default Cart;

uj5u.com熱心網友回復：

你可以做這樣的事情

const Cart = () => {
  const [itemCount, setItemCount] = useState(
    products.reduce((acc, curr) => {
      acc[curr.id] = 1;
      return acc;
    })
  );

  const increaseItem = (id) => {
    setItemCount((prev) => ({ ...prev, [id]: prev.id   1 }));
  };
  const decreaseItem = () => {
    if (itemCount[id] > 1)
      setItemCount((prev) => ({ ...prev, [id]: prev.id - 1 }));
  };

  return (
    <div>
      {products.map((item) => (
        <div>
          <div> {item.clothe} </div>
          <button onClick={() => increaseItem(item.id)}> </button>
          <span>{itemCount}</span>
          <button onClick={() => decreaseItem(item.id)}>-</button>
        </div>
      ))}
    </div>
  );
};

uj5u.com熱心網友回復：

你必須分開每個product.

import React, { useState } from 'react';

const products = [
  { id: 1, clothe: 'pant' },
  { id: 2, clothe: 'shirt' },
  { id: 3, clothe: 'coat' },
];

const Cart = () => {
  const [itemCount, setItemCount] = useState(products.map((item, index) => 0));

  const increaseItem = (index) => {
    const _itemCount = [...itemCount];

    _itemCount[index]  ;

    setItemCount(_itemCount);
  };
  const decreaseItem = (index) => {
    const _itemCount = [...itemCount];

    _itemCount[index]--;

    setItemCount(_itemCount);
  };

  return (
    <div>
      {products.map((item, index) => (
        <div>
          <div> {item.clothe} </div>
          <button onClick={() => increaseItem(index)}> </button>
          <span>{itemCount[index]}</span>
          <button onClick={() => decreaseItem(index)}>-</button>
        </div>
      ))}
    </div>
  );
};

export default Cart;

作業代碼

標籤：javascript 反应

上一篇：微服務設計（一）---微服務架構基礎

下一篇：console.trace()方法在同步和異步關閉函式呼叫中給出不同的輸出