Question

我有一个REACT JS客户端，我想使用 push 方法将购物车商品保存在localStorage中。我有一个 AddtoCart 函数，该函数会将被单击的产品的产品详细信息数组推送到localStorage JSON对象 CartObj 。

但是我想要的是将localStorage的整个CartObj设为JSON对象格式，其中商品根据其 CompanyNames （而不是简单的字符串）进行分组。

当我单击“ 添加到购物车”按钮时，我将以这种格式发送单个产品详细信息：

{
"SparePartID":"45",
"Name":"Lights",
"Price":"2300",
"VendorID": "48",
"CompanyName": "Master Automotives",
"Qty": 1,
"TotalPrice": "4500"
}

我想要的是在localStorage的 CartObj JSON对象中推送该项目（CartObj当前为空）。而且，无论何时单击任何项目，其数据都会被推送到相同的 CartObj 。但是我想在将其中的一些项目压入后，在我的localStroage CartObj 中获得以下数据格式。（按公司名称分组的项目）。

{
    "records": {
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "4500"

            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "2300"
            }
        ],
        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions",
                 "Qty": 1,
                 "TotalPrice": "1500"
            }
        ],
        
         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "234"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "999"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "288"
            }
        ]
    }
}

通过 localStroage 中的推送方法

我可以这样做还是有其他方法可以将数据以这种格式保存在localStorage中。我想要这种格式，因为我需要分别分别处理这些产品的订单。

这是我在REACT中的ADdToCart方法：

  AddToC(part){
    console.log("PartID to be added in cart: ", part); //this part shows details of a product in format I mentioned on very top.

    const alreadyInCart = JSON.stringify(localStorage.getItem('cartObj'));
    alreadyInCart.push(part);


  }

编辑：

{this.state.spareParts.map((part, index) =>


<div>

  <h4 > {part.Name}  </h4>
  <h5> Rs. {part.Price}  </h5>


  <h5> {part.CompanyName} </h5>
<div>

  <button onClick={() => this.AddToCart(index, part.SparePartID)}
  Add to Cart
</button>

</div>


)}

Answer 1

您可以对全局变量使用react Context，可以将值存储在react Contect中，就可以从任何组件树中访问该值，就像全局变量一样，并且比redux易于理解。所以最好的做法是使用React Context

有关更多信息，您可以通过链接

https://reactjs.org/docs/context.html

如何在REACT JS中以特定的JSON对象格式在localStorage中推送数组？

1 个答案: