kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Ecommerce open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Ecommerce

3.1.10

3.0.0-b.19

Version 4.4.0

v4.1.8

Magento Release 2.3.7-p2

saleor

3.1.10

saleor

3.0.0-b.19

spree

Version 4.4.0

reaction

v4.1.8

magento2

Magento Release 2.3.7-p2

Popular Libraries in Ecommerce

Trending New libraries in Ecommerce

Top Authors in Ecommerce

1

63 Libraries

1631

2

47 Libraries

441

3

43 Libraries

762

4

41 Libraries

1002

5

39 Libraries

13734

6

37 Libraries

318

7

35 Libraries

574

8

33 Libraries

3232

9

31 Libraries

1139

10

29 Libraries

422

1

63 Libraries

1631

2

47 Libraries

441

3

43 Libraries

762

4

41 Libraries

1002

5

39 Libraries

13734

6

37 Libraries

318

7

35 Libraries

574

8

33 Libraries

3232

9

31 Libraries

1139

10

29 Libraries

422

Trending Kits in Ecommerce

No Trending Kits are available at this moment for Ecommerce

Trending Discussions on Ecommerce

    React state object turning into "[object Object]" on refresh using sessionStorage
    Render all products that relate to one of subcategories of one category, in category page
    UseParams() not working and not rendering data on screen
    Problem with create table Category and get the url correctly PHP
    proxy server working in one case and failed in another case
    How to send previous items in cart such that my updateCart adds new items on top of previous products in cart
    useReducer: dispatch action, show state in other component and update state when action is dispatched
    connect spring boot to swagger
    Can Django select_for_update be used to acquire a read lock?
    Google Tag Manager / Enhanced E-commerce - Purchase tag dataLayer push working only on Tag Assistance

QUESTION

React state object turning into "[object Object]" on refresh using sessionStorage

Asked 2022-Mar-23 at 14:53

I'm working on a dummy fullstack ecommerce app using Postgres, Express and React whilst going through a fullstack course. This question is pretty specific to React.

On login to the app I can successfully create or retrieve a cart from the db and save it to state. It's being saved as a normal object:

Cart: {id: 2, user_id: 159, product_count: 0, price: '£0.00'}

-From Chrome Dev Tools: Extensions React Developer Tools.

I'm then using React useEffect hooks to persist this state in sessionStorage:

App.js

1 useEffect(() => {
2    if (sessionStorage["cart"]) {
3      setCart(window.sessionStorage.getItem("cart"));
4    }
5  }, []);
6
7  useEffect(() => {
8    window.sessionStorage.setItem("cart", cart);
9  }, [cart]);
10

Whenever I refresh the page or go to another route the normal object seems to be turning into the string: "[object Object]".

I know it has something to do with the way I'm saving the cart state variable into the localStorage but I'm not familiar with it enough to know exactly where this is happening or how to fix it so any help would be appreciated.

I've tried changing the assignment variables within the useEffect calls to include trying to save the item as an object, but I'm not familiar enough with sessionStorage to know what's happening behind the scenes.

ANSWER

Answered 2022-Mar-23 at 14:53

When you store the object to storage, call JSON.stringify(cart) to convert from an object to a string.

When you read the object from storage, it's const cart = JSON.parse(cartString) to convert from the string back into an object.

Like so:

copy icondownload icon

1 useEffect(() => {
2    if (sessionStorage["cart"]) {
3      setCart(window.sessionStorage.getItem("cart"));
4    }
5  }, []);
6
7  useEffect(() => {
8    window.sessionStorage.setItem("cart", cart);
9  }, [cart]);
10  useEffect(() => {
11    if (sessionStorage["cart"]) {
12      setCart(JSON.parse(window.sessionStorage.getItem("cart")));
13    }
14  }, []);
15
16  useEffect(() => {
17    window.sessionStorage.setItem("cart", JSON.stringify(cart));
18  }, [cart]);
19

Source https://stackoverflow.com/questions/71589271