正在将阵列保存到本地存储(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 persistent来持久化redux存储。所以你不需要处理所有本地存储的东西。