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

如果你想在本地存储中存储一些东西，最好使用react中的生命周期:

componentDidUpdate() 用于类组件 useEffect 用于功能组件