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

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>

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

在点击添加按钮之前，

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

点击添加按钮后，

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

在与 UI 相关的情况下一切正常，但问题在于更新每个产品的数量。

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

const contextData = useContext(AppContext);

const productsCount = contextData.cart;

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

问题：

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

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

预期：

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

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

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

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

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

Answer 1

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

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

1. 忘记上下文提供者。

2. 在您的产品组件中添加useState()，例如：const [count, setCount] = useState();

3. 制作 2 个函数（addFromCart 和 removeFromCart） 为必须添加和项目或删除的按钮调用 onClick 购物车中的商品

4. 对于 addToCart 你可以这样做：

   const addToCart = () => setCount(prev => prev+1);

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

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