Javascript 获取所选项目及其计数

我正在尝试制作一个购物车应用程序，但使用的是reactjs

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

组件

）

单击“添加”按钮后

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

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

到目前为止一切都很好，每个产品各自的数量都会添加到主页中

还借助于制作了一个

AppContext

并更新了购物车

  const addToCart = (product) => {
    if (+cart >= 0) {
      setCart(+cart + 1);
      setCartItems(product);
    }
  };

在nav.js中，我正在获取产品的更新计数，但当我单击“袋子”菜单（这是购物车页面）时，我无法获取上下文

预期结果

在访问购物车页面时（点击页眉中的“购物袋”菜单），页面将分别显示迄今为止选择的产品（带有名称和说明）及其数量

当前结果：

无法获取appcontext数据并显示所选产品和数量

工作片段：

---

请帮助我在导航至购物车（袋）页面时显示所选产品及其相应数量的结果。。我为此奋斗了很长时间。。因此，我诚恳地请求您帮助我找到正确的解决方案。。提前非常感谢。

您需要将

应用程序提供商

移动到

\u app.js

并将其从

index.js

和

cart.js

中删除，然后这两个页面将能够访问相同的上下文

你的

\u app.js

应该是这样的

import React from "react";
import App from "next/app";
import { AppProvider } from "../components/context/AppContext";

export default class TailwindApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <AppProvider>
        <Component {...pageProps} />
      </AppProvider>
    );
  }
}

从“React”导入React；
从“下一个/应用程序”导入应用程序；
从“./components/context/AppContext”导入{AppProvider}”；
导出默认类TailwindApp扩展应用程序{
render（）{
const{Component，pageProps}=this.props；
返回(
);
}
}

问题

您有多个

AppProvider

组件，每个组件都为其包装的子组件提供不同的上下文

初始的

AppContext

形状与作为上下文值传递的内容不匹配

cartItems

状态未作为数组维护

其他各种问题和模式

解决方案

删除所有无关的

AppProvider

提供程序组件，只使用一个组件将整个应用程序包装在

\u app.js

中

import { AppProvider } from "../components/context/AppContext";

export default class TailwindApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <AppProvider>
        <Component {...pageProps} />
      </AppProvider>
    );
  }
}

在

Products.js

中删除所有本地项目计数状态，可以从上下文中的状态访问数量。有条件地呈现项目计数上的“添加项目”和递增/递减按钮

import Link from "next/link";
import { useContext } from "react";
import { AppContext } from "./context/AppContext";

const Product = (props) => {
  const { product } = props;
  const contextData = useContext(AppContext);

  const count =
    contextData.cartItems.find(({ id }) => id === product.id)?.quantity ?? 0;

  const addToCart = (product) => () => {
    contextData.addToCart(product);
  };
  const removeFromCart = (product) => () => {
    contextData.removeFromCart(product);
  };

  return (
    ...

        {count ? (
          ...
              {count}
          ...
        ) : (
          ...
              <span className="label">ADD</span>
          ...
        )}
      </div>
    </div>
  );
};

注意：请注意，

id

属性已添加到

products

数组中的所有项目/产品中，以使匹配/识别它们变得更容易

演示

---

我真的非常感谢您在适当的时候提出的解决方案，兄弟。。抱歉打扰您的其他请求。。1） 我想知道如何在购物车页面中修改产品的数量并更新公共上下文？2） 如何计算总价？（我需要在购物车页面或上下文中进行吗？）。。另外，如果你能帮我解决上述两个问题，那将对我非常有帮助。。再次感谢兄弟..@Undefined（1）修改购物车页面上的数量您可以简单地分解

addToCart

和

removeFromCart

并在映射的项目中呈现按钮，并以与

product

组件相同的方式传递产品。（2） 要计算可从

cartItems

数组导出的总价，只需将cart数组减少到每个cart项目的成本为

Quantity*price

的总价。我知道你们的价格是包含货币的字符串。您可能希望将数据转换为存储数值

价格
值，以后可以附加任何需要的货币符号。谢谢您的评论，兄弟。。我觉得我完全打扰了你。。但是你能用新的解决方案更新代码沙盒吗。。对此我非常抱歉。@Undefined分叉了一个新的：
import { AppProvider } from "../components/context/AppContext";

export default class TailwindApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <AppProvider>
        <Component {...pageProps} />
      </AppProvider>
    );
  }
}

import React, { useState, useEffect } from "react";

export const AppContext = React.createContext({
  cart: 0,
  cartItems: [],
  setCart: () => {},
  addToCart: () => {},
  removeFromCart: () => {}
});

export const AppProvider = (props) => {
  const [cart, setCart] = useState(0);

  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    setCart(cartItems.reduce((count, { quantity }) => count + quantity, 0));
  }, [cartItems]);

  const addToCart = (product) => {
    setCartItems((items) => {
      if (items.find(({ id }) => id === product.id)) {
        return items.map((item) =>
          item.id === product.id
            ? {
                ...item,
                quantity: item.quantity + 1
              }
            : item
        );
      } else {
        return [
          ...items,
          {
            ...product,
            quantity: 1
          }
        ];
      }
    });
  };

  const removeFromCart = (product) => {
    setCartItems((items) => {
      const foundItem = items.find(({ id }) => id === product.id);
      if (foundItem?.quantity > 1) {
        return items.map((item) =>
          item.id === product.id
            ? {
                ...item,
                quantity: item.quantity - 1
              }
            : item
        );
      } else {
        return items.filter(({ id }) => id !== product.id);
      }
    });
  };

  return (
    <AppContext.Provider value={{ cart, addToCart, removeFromCart, cartItems }}>
      {props.children}
    </AppContext.Provider>
  );
};

import Link from "next/link";
import { useContext } from "react";
import { AppContext } from "./context/AppContext";

const Product = (props) => {
  const { product } = props;
  const contextData = useContext(AppContext);

  const count =
    contextData.cartItems.find(({ id }) => id === product.id)?.quantity ?? 0;

  const addToCart = (product) => () => {
    contextData.addToCart(product);
  };
  const removeFromCart = (product) => () => {
    contextData.removeFromCart(product);
  };

  return (
    ...

        {count ? (
          ...
              {count}
          ...
        ) : (
          ...
              <span className="label">ADD</span>
          ...
        )}
      </div>
    </div>
  );
};

import { useContext } from "react";
import { AppContext } from "../components/context/AppContext";

const Cart = () => {
  const { cart, cartItems } = useContext(AppContext);

  return (
    <div>
      <h1> Cart Page </h1>
      <h2>Total Item Count: {cart}</h2>
      <p>
        <ul>
          {cartItems.map(({ id, name, quantity }) => (
            <li key={id}>
              {name}: {quantity}
            </li>
          ))}
        </ul>
      </p>
    </div>
  );
};