localstorage setItem() 在某些情况下不起作用

Question

我正在使用 React Reducer 来处理从列表中删除项目的请求：

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

当我点击第一个项目时一切正常，但是当我删除其他项目时，我的状态更新和 console.log(result) 工作正常，但是本地存储没有更新，所以我假设 setItem 没有启动。如果有人能帮助我解决这个问题，我将不胜感激。

Answer 1

在 React 中，状态是不可变的。简单来说，这意味着您不应该直接修改它。相反，应该创建一个新对象来使用 setState 设置状态。

splice() 方法改变数组。 filter() 不会改变调用它的数组。最好采用以下方法：

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

return { ...state, products: deleted}

而且如果你想在localstorage中存储一些东西，最好使用react中的生命周期：

componentDidUpdate() 对于 class 组件 useEffect 功能组件

Answer 2

我猜测，当您第二次单击它时，由于 localstorage 的同步特性，它会导致问题。

试试这个

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};
    }

参考：

localstorage setItem() 在某些情况下不起作用

localstorage setItem() is not working in some cases

javascript

reactjs

local-storage