Javascript “反应-设置”；“添加到购物车”；

我在这里做一个小项目，一个服装网站。由于缺乏经验，我一直无法在过去的网站上设置“添加到购物车”功能。但那是很久以前的事了，我决定再试一次

现在，我很快就被卡住了，通常只需要一些关于如何设置的指导和提示

到目前为止，我已经通过“添加到购物车”按钮将数据（如名称、价格、颜色、图像）发送回父组件

“添加到购物车”按钮所在的“产品页面”文件夹如下所示：

./Product
  ./productFetch
     // API Fetch files
  ./Product.js // Parent
  ./ProductContent.js // Child | Also where "add to cart" btn is located

./Components
    ./product
      // ...
    ./ShoppingCart
      ./Cart.js // Parent
      ./Product.js // Child (the "card" for each product)

现在，实际的购物车组件位于单独的文件夹中，如下所示：

./Product
  ./productFetch
     // API Fetch files
  ./Product.js // Parent
  ./ProductContent.js // Child | Also where "add to cart" btn is located

./Components
    ./product
      // ...
    ./ShoppingCart
      ./Cart.js // Parent
      ./Product.js // Child (the "card" for each product)

到目前为止，如前所述。我在Cart.js中需要的信息已发送到

/Product

中的

Product.js

。但是现在我需要将它发送到

/ShoppingCart

中的

Cart.js

我应该如何处理这个问题？我尝试使用LocalStorage进行此操作，但没有成功。我看过一些教程，但首先，它们与我的情况不同。而且，我也没有真正了解正在发生的事情

我面临的主要问题是，当单击“添加到购物车”按钮时，如何有效地将产品数据发送到购物车

当然，我可以将数据发送回

App.js

，然后发送到购物车。但是我会将状态提升两次，然后将其交给

Cart.js

。正如我所理解的，你不应该这样做

不确定需要什么代码，请告诉我您需要什么代码来帮助我

谢谢

编辑： 以下是可能有用的部分代码：

/ProductContent.js中的“添加到购物车”按钮

          <button
            type="button"
            onClick={() =>
              props.addToCart({
                name: props.name,
                price: props.price,
                color: props.mainImg?.colour,
                img: props.mainImg?.url,
                id: params.productid,
              })
            }
            className={classes.add_to_cart}
          >
            <Cart />
            add to cart
          </button>

据我所知，这是一个状态管理问题，可以通过上下文Api或Redux解决。您是否尝试实施其中一个？这些工具是针对这类问题的。我在过去研究过上下文API，但它总是让我感到困惑。我会看看我是否能用它做任何事情，我也会看看Redux！在我看来，设置上下文比设置redux更容易、更舒适。同样对于你的项目来说，它应该可以很好地工作，并且是对你技能的一个很好的练习。好吧，太棒了。我会检查一下，看看能不能找到工作！谢谢