useDispatch 渲染不变的孩子

Question

这是一个功能组件，与Redux商店挂钩以获取产品。此外，我定义了removeFromCart钩子来从产品列表中删除项目。

const ProductListHooks = () => {
const products = useSelector( state => state.productsModule.products);
const removeFromCart = useDispatch({ type:actions.REMOVE_FROM_CART});
return (
<>
{products.map(product => {
return (
<ProductItem
product={product}
key={product.id}
removeFromCart={removeFromCart}
/>
);
})}
</>
);
};

问题：当我调用removeFromCart时，它会删除该项目，但会重新呈现列表中的所有其他项目。我该如何解决它？

Answer 1

可能不漂亮，但你可以记住每个项目：

const ProductItem = function memo({ product, removeFromCart }) {
return useMemo(() => 
<Item product={product} removeFromCart={removeFromCart} />
, [product]);
}