每个项目中的更新计数（附有代码段）

Question

我正在尝试制作类似 this site 的购物车应用程序，但使用的是 reactjs.

我几乎达到了 UI 但在功能方面，我遇到了问题。

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

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

components/product.js:

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

我还有 ADD 按钮 UI 开关代码，看起来像，

点击添加按钮前，

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

点击添加按钮后，

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

到目前为止，与 UI 相关的一切正常，但问题在于更新每个产品的数量。

我正在从 contextApi 获取计数，它看起来像，

const contextData = useContext(AppContext);

const productsCount = contextData.cart;

每次我们点击添加按钮时，这个计数都会更新。（这在我们点击单品的时候就可以了）

问题：

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

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

期望值：

但需要分别更新每个产品的计数。

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

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

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

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

Answer 1

问题是您正在使用 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

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

每个项目中的更新计数（附有代码段）

Update count in each item (Snippet Attached)

javascript

cart

reactjs

next.js