Как перенести массивы в localStorage в конкретном формате объекта JSON в REACT JS?

Question

У меня есть клиентская часть REACT JS, на которой я хочу сохранить Элементы корзины покупок в localStorage, используя метод push . У меня есть функция AddtoCart , которая будет выдвигать массив сведений о продукте продукта, по которому щелкнули, в объект JSON localStorage CartObj .

Но я хочу, чтобы все CartObj localStorage было в формате объекта JSON, в котором продукты сгруппированы в соответствии с их CompanyNames (вместо простых строк).

Когда я нажимаю кнопку « AddtoCart », я отправляю одну информацию о продукте в этом формате:

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

И я хочу нажать этот элемент выше в CartObj JSON-объект в localStorage (CartObj в настоящее время пуст). И всякий раз, когда щелкает какой-либо элемент, его данные передаются в один и тот же CartObj . Но я хочу получить этот формат данных ниже в моем localStroage CartObj после того, как в него будет помещено несколько элементов. ( элементы, сгруппированные по CompanyNames ).

{
    "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"
            }
        ]
    }
}

Могу ли я сделать это методом push в localStroage или есть какой-либо другой способ сохранить данные в localStorage в этом формате. Я хочу этот формат, потому что мне нужно обработать заказ этих продуктов отдельно .

вот мой метод 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);


  }

EDIT:

{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,

Для получения дополнительной информации вы можете перейти по ссылке

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