将数组保存到本地存储（reactjs）

Question

我正在尝试将产品从购物车保存到本地存储，但在页面刷新时它并没有像想象的那样工作。当我刷新页面时，产品在购物车中，但一旦我添加新项目，它就会被删除。此外，删除产品会删除所有内容，而不是使用本地存储时的特定内容。这是我尝试过的：

在App.tsx设置数组中

const [productList, dispatch] = useReducer((state: any, action: any) => {
    switch (action.type) {
      case "ADD_ITEM":
        const noDoubleItems = state.filter((item: any) => item.id !== action.payload.id);
        localStorage.setItem("cart",JSON.stringify([...noDoubleItems, action.payload]));
        return [...noDoubleItems, action.payload];

      case "DELETE_ITEM":
        localStorage.setItem("cart", JSON.stringify(state));
        return state.filter((item: any) => item.id !== action.payload.id);

      default:
        return state;
    }
  }, []);

在Cart.tsx 中获取数组

  const storageCart = localStorage.getItem("cart");
  const storageCartObject = storageCart && JSON.parse(storageCart);

这里是代码沙箱：https://codesandbox.io/s/flamboyant-torvalds-tevby?file=/src/components/pages/Cart.tsx:298-1026

Answer 1

您的 storageCart 已使用 localStorage 初始化，但您的 Redux 状态未初始化。所以， storageCart 仍然存在，但是当您发送 ADD_ITEM 操作时，Store 是空的，这就是您添加的第一个产品消失的原因。

您也可以在每次用户刷新页面时使用 redux-persist 来持久化 Redux 存储。所以你不需要处理所有本地存储的东西。