javascript - 每个项目的更新计数（附加片段）

问题描述

我正在尝试制作一个像这个网站一样的购物车应用程序，但使用reactjs。

我几乎已经实现了 UI，但在功能方面，我遇到了一个问题。

index.js：（将每个产品发送到 product component）

        {products.length > 0
          ? products.map((product) => (
              <Product key={product.id} product={product} />
            ))
          : ""}

组件/product.js：

<div>
    {product?.price}
   <h3>
      {product.name ? product.name : ""}
   </h3>
   <div dangerouslySetInnerHTML={{ __html: product?.description }} />
</div>

我也有添加按钮 UI 切换代码，看起来像，

在点击添加按钮之前，

------------
| ADD     +|
------------

点击添加按钮后，

-----------------
| -  {count}   +|
-----------------

与 UI 相关的事情进展顺利，但问题在于更新每个产品的数量。

我从 contextApi 得到计数，它看起来像，

const contextData = useContext(AppContext);

const productsCount = contextData.cart;

每次我们单击添加按钮时，此计数都会更新。（当我们单击单个产品时，这很好）。

问题：

如果我单击第一个产品中的添加按钮，然后如果我单击第二个按钮中的添加，那么两个产品的结果都如下所示。

------------
| -  2   + |
------------

期待：

但是需要分别在每个产品上更新计数。

-> 如果我单击产品一上的添加按钮一次，那么产品一中的计数需要为1。

------------
| -  1   + |
------------

-> 如果我三次单击产品二上的添加按钮，则产品二中的计数需要为3。

------------
| -  3   + |
------------

标签： javascriptreactjsnext.jscart

问题是您useContext()用于存储计数。所有组件的上下文值都是相同的，这就是为什么当您单击添加按钮时，您的上下文值会发生变化，并且因为所有组件都相同，所以您的其他组件也会反映更新后的值。我建议您使用useState()每个项目组件，这样它们就不会影响其他项目的计数值。

编辑我无法添加评论，因为我没有所需的积分。我看到了您的代码，您可以在 Product.js 文件中执行以下操作：

忘记上下文提供者。
添加useState()您的产品组件，例如：const [count, setCount] = useState();
制作 2 个函数（addFromCart 和 removeFromCart），这些函数将在 onClick 上为必须添加和物品或从购物车中删除物品的按钮调用
对于 addToCart 你可以这样做：

const addToCart = () => setCount(prev => prev+1);
对于 removeFromCart 执行此操作：
const removeFromCart = () => { setCount(prev => prev-1) } //make sure that your count is not below 0 by using an if-statement

这样，当您为产品按下添加时，它不会影响其他产品，因为每个产品都有自己的状态:)

javascript - 每个项目的更新计数（附加片段）

问题描述

解决方案

推荐阅读