在我的redux商店中,我有产品和cartItem。当我渲染每个产品时,我还在每个产品上都提供了一个名为addToCart的按钮。因此,当我单击按钮时,该项目将添加到cartItems数组(商店)中
现在,每个购物车商品都具有数量属性。这样,如果再次调用添加到购物车按钮,我会增加数量。
我想要的是我渲染的产品组件中该cartItem数量的值。这样我就可以有条件地将“添加到购物车”按钮的文本内容设置为:
${cartItem.quantity} on bag
这是我的产品组件:
const Product = ({
id,
title,
brand,
price,
image_url,
addCartItem
}) => {
const [isClicked, setIsClicked] = useState(false);
const handleAddToCart = (id) => {
setIsClicked(true);
addCartItem(id);
};
return (
<div className='product'>
{/* <Link to={`/product/${id}`}> */}
<img src={image_url} alt={title} />
<div className='title'>
<span>{title}</span>
<span>{brand}</span>
</div>
{/* </Link> */}
<div className='actions'>
<span>${price}</span>
<button onClick={() => handleAddToCart(id)}>
{isClicked ? `${I need quantity here} in Bag` : 'Add to Cart'}
</button>
</div>
</div>
);
};
答案 0 :(得分:1)
您说您有一个名为cartItems[]
的减速器,并且在用户单击添加到购物车按钮后将product{}
存储在其中。好吧,简单的逻辑。现在,您需要的是quantity
的每个乘积中的一个名为cartItems[]
的属性。您可以使用redux的useSelector
钩子获得该属性(因为您正在使用钩子)。
const { quantity } = useSelector(store => store.cartItems.find(item => item.id === id));
我们在这里所做的是,我们从cartItems数组中获取目标产品
使用传入的id
作为参数,然后访问该产品的数量。如果product []列表很大,而cartItems []也很大,那么这对性能将是非常不利的。尝试使用一个对象来存储cartItems {}并像访问它一样
const quantity = useSelector(store => store.cartItems[id].quantity);
这种方法非常有效,因为没有循环,它是O(1)。
希望这能回答您的问题。
答案 1 :(得分:0)
我希望您可以使用Combinereducer将reducer正确连接到全局存储,如果您进行了连接,则可以这样使用- 由于您正在使用React钩子,因此从react-redux导入 useSelector ,
import { useSelector} from 'react-redux';
,只需在函数内部调用useSelector即可获取数据
const taskDetails = useSelector((state) => (state.taskDetails.entities));