在反应商店应用程序中正确呈现价格

Question

将我的产品添加到购物车后，我需要更改特定产品的价值，并且我想自动更改价格，但在尝试更改价值后，购物车中的每个产品的价格都在变化，并将价格传递给其他产品来自不断变化的产品的产品。

我该如何解决这个问题？

function CartItems ( {cart, handleRemove} ) {
     
  const [price, setPrice] = useState(false);

  const handleValue = (e, id) => {
    let selectedValue = e.target.value;
    let currentPrice = cart.map((item) => item.id === id ? selectedValue * item.price : item.price) 
    setPrice(currentPrice);
    console.log(currentPrice)
  }

  return (
    <div  className='cart_item'>
      {cart.map((item, id) => (
        <div key={id} className='cart_item--item'>
           <div className="cart_item--image">
                <img
                  className="cart_item_image--img"
                  src={item.image}
                  alt="/"
                ></img>
              </div>
              <div className='cart_item--content'>
              <h3 className="cart_item--h3">{item.title}</h3>
              <select className='cart_item--value' onChange={(e) => handleValue(e,item.id)}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
              </select>
              <p className="cart_item--price">{`Price: ${price ? price : item.price}`}
                <span>{<BiEuro />}</span></p>
                <button onClick={() => handleRemove(item)}>Remove</button>
              </div>
        </div>
      ))}
    </div>
  )
}

export default CartItems

Answer 1

在这一行中：

<p className="cart_item--price">{`Price: ${price ? price : item.price}`}

您导致每个商品的价格显示为当前所选商品的价格，因此您应该删除该三元组：

<p className="cart_item--price">{`Price: ${price}`}

如果您想根据所选商品的数量显示价格，则需要使用您所在州的一个对象，该对象将商品 ID 映射到价格，如下所示：

const [priceMap, setPriceMap] = useState({})

  const handleValue = (e, id) => {
    let selectedValue = e.target.value;
    let currentPrice = cart.map((item) => item.id === id ? selectedValue * item.price : item.price) 
    setPriceMap({...priceMap, [item.id]: currentPrice});
  }

然后在代码中渲染它，如下所示：

<p className="cart_item--price">{`Price: ${priceMap[item.id] === undefined ? item.price : priceMap[item.id]}`}