localstorage setItem() is not working in some cases

Question

I'm using react reducer to handle a request for a deleting an item from the list:

case 'REMOVE_ITEM': {
      let products = state.products!
      for( var i = 0; i < products.length; i++){ 
    
        if ( products[i].id === action.payload) { 
          products.splice(i, 1); 
        }
      }

      let result = {...state, products: products, productSelected: products[0]}
      localStorage.setItem('state', JSON.stringify(result))
      console.log(result)
      return { ...state, products: products, productSelected: products[0]}
    }

When I click the first item everything works great, but when I delete other items, my state updating and console.log(result) work fine, but there are no updates to localstorage, so I assume that setItem is not launching. I would greatly appreciate if someone could help me with this issue.

You are changing an array while iterating over it, which is bound to not work as expected. I guarantee that localStorage.setItem works absolutely fine, the issue is your code. Use Array.filter() to remove a product. — , Apr 27 '22 at 18:47

soheiljafarnejad · Accepted Answer · 2022-04-27T19:55:43.310

2

In React, the state is immutable. In simple terms it means that you should not modify it directly. Instead a new object should be created to set the state using setState.

The splice() methods mutate an array. filter() does not mutate the array on which it is called. It is better to do the following method :

const deleted=state.products.filter((item)=>item.id !=== action.payload)

return { ...state, products: deleted}

And if you want to store something in localstorage, it is better to use the lifecycle in the react:

componentDidUpdate() for class component useEffect for functional component

edited Apr 27 '22 at 19:55

answered Apr 27 '22 at 19:39

soheiljafarnejad

96
3

Replacing `splice()` with `filter()` was not very helpful in this particular case (even though in general it's a good advice). However, moving `setItem()` to a function which renders the main page solved the problem: ```const state = useContext(GlobalProviderState); localStorage.setItem('state', JSON.stringify(state)) ``` – Pavel Shepelenko Apr 28 '22 at 11:00

score 0 · Answer 2 · answered Apr 27 '22 at 20:12

I am guessing that, when you are clicking it on the second time it is causing problem because of the synchronous nature of localstorage .

Try this

const asyncLocalStorage = {
    setItem: function (key, value) {
        return Promise.resolve().then(function () {
            localStorage.setItem(key, value);
        });
    },
    getItem: function (key) {
        return Promise.resolve().then(function () {
            return localStorage.getItem(key);
        });
    }
};
case 'REMOVE_ITEM': {
      let products = state.products
      for( var i = 0; i < products.length; i++){ 
    
        if ( products[i].id === action.payload) { 
          products.splice(i, 1); 
        }
      }

      let result = {...state, products: products, productSelected: products[0]}
      asyncLocalStorage.setItem('state', JSON.stringify(result))
      console.log(result);
      return { ...result};
    }

Reference : Link

Wrapping this with promises doesn't solve the issue. As pointed out above by soheiljafarnejad , they're modifying an array while iterating over it. — Nick Lediet, Apr 27 '22 at 20:20

localstorage setItem() is not working in some cases

2 Answers2