Сохранение массива в локальное хранилище (reactjs) - PullRequest
Новая
       1

Сохранение массива в локальное хранилище (reactjs)

1 голос
/ 06 мая 2020

Я пытаюсь сохранить продукты из корзины покупок в локальное хранилище, но на странице refre sh это работает не так, как предполагалось. Когда я обновляю страницу sh, товары уже находятся в корзине, но как только я добавляю новый товар, он стирается. Кроме того, при удалении продукта удаляется все, а не указанный c при использовании локального хранилища. Вот что я пробовал:

in App.tsx set array 

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;
    }
  }, []);

in Cart.tsx get array 

  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

1 Ответ

1 голос
/ 06 мая 2020

Ваш storageCart инициализирован с помощью localStorage, но ваше состояние Redux не инициализировано. Итак, storageCart все еще существует, но когда вы отправляете действие ADD_ITEM, Store пуст, поэтому первый добавленный вами продукт исчезает.

Вы также можете использовать redux-persist для сохранения хранилища Redux каждый раз пользователь refre sh страницу. Так что вам не нужно обрабатывать все, что связано с локальным хранилищем.

...