我有And /lt; add /＆gt;在两个不同的页面中调用的组件，但其中只有一个是接收到添加计数道具在React JS中传递给它

Question

请帮助我理解为什么这种逻辑不在我的计数器按钮的实例之一上工作。我的目标是让我的计数器显示这样的计数：

要在购物车中添加项目，我正在使用此功能：

 const handleAddProduct = (product) => {
    const productExists = cartItems.find((item) => item._id === product._id);

    if (productExists) {
      setCartItems(
        cartItems.map((item) =>
          item._id === product._id
            ? {
                ...productExists,
                customer_qty: productExists.customer_qty + 1,
              }
            : item
        )
      );
     
    } else {
      setCartItems([...cartItems, { ...product, customer_qty: 1 }]);
    }
  };

当我查看＆lt; cart; cart/gt;页面是因为此页面在“ Cartitems”数组中显示产品，这些阵列具有新添加的“ Customer_QTY”键。 ＆lt; add /＆gt;组成部分渲染

<p> product.customer_qty </p>

Cartitems和HandleadDroduct被这样传递：

- \<App />  
   - \<Cart />  
        - \<ShoppingCartCard /> /*Each card here is an item from "cartItems"*/ 
            - \<Add />  

，但是，在正常的购物页面中，我无法获得相同的

产品。customer_qty

to display on the counter, since the product card instance is rendered for each item in the original array of products, so those products don't have "product.customer_qty"

对于网站的另一个分支，Cartitems和HandleadDropoduct被这样传递：

- \<App />  
   - \<Products />  
        - \<Specials /> /*Specials passes down product data */
            - \<Carousel />  
                - \<ProductCard />  
                    - \<Add />

因此，我缺少的是一种让＆lt; add /gt;的方法。两个分支中的组件，以显示相同的计数号。

我已经尝试做一个setCount，但是如果我在top＆lt; app /＆gt;级别，它不会单独计数每种产品（所有产品都具有相同的计数）。如果我以产品卡级别进行操作，那么它是两个不同的计数。

我在这里想念什么？计数应出现在三个地方：斑标，购物车页面和每张产品卡中的购物车。

如果您想看到它，我可以共享我的GitHub存储库（这是私人的，因为这是一个课程分配。）。

Answer 1

好的，所以我意识到我可能已经过度复杂了。但是困难在于接收和显示每种产品数据的复杂方式。我仅通过了解“产品”在每个组件（购物车和ProductCard）中的含义来解决我的问题。

在＆lt; cart /＆gt; < /code>组件中，每个“产品”是原始的合成重复（通过使用涂抹式操作员“ ...”。是一个小数组的一个对象已添加到“ Cartitems”的

。

产品 ＆lt; add /＆gt; < /code>组件以显示“ customer_qty：”的值，这本来可以计算客户想要购买的物品。 component, but not in the component.

Remember: While the lists items in that have already been added对于购物车，＆lt; productcard /＆gt; < /code>将列出原始数据集中的项目，

或者经验丰富的编码者可能会看到问题：如果它不存在，则不存在。被添加到购物车中。

因此，＆lt; cart /＆gt; < /code>可以访问此值，而＆lt; productCard /＆gt; < /code>不会因为它正在访问原始对象，该对象不包括“ customer_qty” ：“在其中，这是无效的。

解决方案

---

创建一个具有匿名函数的变量，该变量是否已经添加到购物车中，首先检查该项目。如果有的话，那么数量将是该项目的“ customer_qty”，它仅存在于购物车项目中。如果不存在，则为0。

const quantity = (product) => {
    let quantity;
    cartItems.map((item) => {
      if (item._id === product._id) {
        quantity = item.customer_qty;
      }
    });
    return quantity;
  };

完整的添加组件看起来像这样：

const Add = ({ product, handleRemoveProduct, handleAddProduct, cartItems }) => {
  const productExists = cartItems.find((item) => item._id === product._id);

  const quantity = (product) => {
    let quantity;
    cartItems.map((item) => {
      if (item._id === product._id) {
        quantity = item.customer_qty;
      }
    });
    return quantity;
  };

  return (
    <div className="counter">
      {productExists ? (
        <div className="show">
          <div className="minus-box">
            <i
              className="icon-minus"
              onClick={() => {
                handleRemoveProduct(product);
              }}
            ></i>
          </div>
          <div className="count">{productExists ? quantity(product) : 0}</div>
          <div className={"add-box"}>
            <i
              className="icon-pink-cross"
              onClick={() => {
                handleAddProduct(product);
              }}
            ></i>
          </div>
        </div>
      ) : (
        <div className="first-add">
          <i
            className="icon-pink-cross"
            onClick={() => {
              handleAddProduct(product);
            }}
          ></i>
        </div>
      )}
    </div>
  );
};

export default Add;