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操作时，商店为空，这就是添加的第一个产品消失的原因。

您还可以在用户每次刷新页面时使用redux-persist持久化Redux存储。因此，您无需处理所有本地存储内容。

将阵列保存到本地存储（reactjs）

1 个答案: