在react store应用程序中正确呈现价格

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]}`}