useDispatch 渲染未更改的子级

Posted 2023-02-22

【中文标题】useDispatch 渲染未更改的子级

【英文标题】：useDispatch render unchanged childern

【发布时间】：2020-04-24 14:54:46

【问题描述】：

这是一个带有挂钩到 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 时，它会删除该项目，但会重新呈现列表中的所有其他项目。我该如何解决？

【问题讨论】：

您可以记住ProductItem 组件或为其实现shouldComponentUpdate()，如果道具没有更改，则停止重新渲染。您也可以将 ProductItem 设为纯组件，但请注意其含义（每次都检查浅 props）

@Jayce444 它是记忆和纯粹的，但它不起作用。

【参考方案1】：

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

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