将单击的单个产品添加到购物车。反应上下文

Question

我在上下文中创建了购物车数组

 const [cart, setCart] = useState([]);

我想实现一个 addToCart Button，在每次单击按钮时，将单击的产品添加到购物车，并将该特定产品上的按钮从 Add to cart 更改为 Remove from cart，并非所有产品。

const addProduct = (product) => {
    setCart([
      ...cart,
      {
        id: product.id,
        drinkName: product.drinkName,
        price: product.price,
        url: product.url,
      },
    ]);

};

商店页面

const { products, storeQuery, addProduct } = useProduct();
// Products are coming from Firebase

  const addToCart = (product) => {
    const newProduct = {
      id: product.id,
      drinkName: product.drinkName,
      price: product.price,
      url: product.url,
    };
    product = newProduct;
    console.log("cart Added");
    addProduct(newProduct);
    console.log(newProduct.id, "Clicked");
  };

<SimpleGrid
              columns={{ base: 2, md: 4 }}
              spacing={{ base: 3, md: 4 }}
            >
              {products?.map((docsSnapshot) => {
                const product = docsSnapshot.data();
                return (
                  <ProductList
                    key={docsSnapshot.id}
                    docsSnapshot={docsSnapshot}
                    product={product}
                    addProductToCart={(product) => addToCart(product)}
                  />
                );
              })}
            </SimpleGrid>

产品列表页面

<Button
              isFullWidth
              onClick={() => addProductToCart(product, docsSnapshot?.id)}
              colorScheme="success"
              size={"xs"}
            >
              Add to cart
            </Button>

id: 未定义，为什么会这样？

我还想检查购物车中的单个产品是否是另一个组件。

像这样

const inCart = Boolean(
    Map through the cart and check if that product is already in the cart
  );

这样我就可以在 incremental button 存在的情况下显示它，如果不存在则显示 addButton。

最后，从任何组件访问数量。

能够在产品详细信息页面中显示特定产品数量。

Answer 1

我不保证每个产品文档都有来自 Firestore 的 id 字段。

重构代码为：


{products?.map((docsSnapshot) => {
                const doc = docsSnapshot.data();
                const product = {...doc,id:docsSnapshot.id}
                return (
                  <ProductList
                    key={docsSnapshot.id}
                    docsSnapshot={docsSnapshot}
                    product={product}
                    addProductToCart={(product) => addToCart(product)}
                  />
                );
              })}

要将 Add to cart 更改为 Remove to cart 标签，请尝试。


products?.map((docsSnapshot) => {
  const doc = docsSnapshot.data();
  const product = { ...doc, id: docsSnapshot.id };
  // Find product either added to cart.
  const inCart = Boolean(cart.find((el) => el.id === product.id));
  return (
    <ProductList
      key={docsSnapshot.id}
      docsSnapshot={docsSnapshot}
      product={product}
      addProductToCart={(product) => addToCart(product)}
      // Add extra props for to indicate if product added to cart
      isInCart={inCart}
    />
  );
});

稍后进入产品页面，重构如下：

<Button
  isFullWidth
  onClick={() => addProductToCart(product, docsSnapshot?.id)}
  colorScheme="success"
  size={"xs"}
>
  {props.isInCart ? "Remove" : "Add"} to cart
</Button>;

Answer 2

计算购物车总数。


const total = cart.map(product=>product.price* product?.quantity||1 ).reduce(previousValue, currentValue) => previousValue + currentValue,
  0)

console.log({total})

将单击的单个产品添加到购物车。反应上下文

Add Individual Product Clicked to Cart. React Context

firebase

reactjs

google-cloud-firestore

react-context