时间戳

首页 > 解决方案 > 如何将数据从本地存储添加到购物车？

reactjs - 如何将数据从本地存储添加到购物车？

问题描述

我正在尝试从本地存储设置购物车数据并将其设置在购物车项目上。我已经在本地存储上设置了购物车数据。但是当我尝试将本地存储的数据设置到购物车时遇到问题。当我尝试设置它时，我无法正确设置它。也许这就是我面临的问题。这是购物车减速器代码

import { useState } from "react";
import { SHOW_HIDE_CART, ADD_TO_CART, REMOVE_ITEM } from "../Types";
const CartReducer = (state, action) => {
  const cartDataFromLocal = JSON.parse(localStorage.getItem('cartItem');
  switch (action.type) {
    case SHOW_HIDE_CART: {
      return {
        ...state,
        showCart: !state.showCart,
      };
    }
    case ADD_TO_CART: {
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
  
      };
    }
    case REMOVE_ITEM: {
      return {
        ...state,
        cartItems: state.cartItems.filter(
          (item) => item._id !== action.payload
        ),
      };
    }

    default:
      return state;
  }
};

export default CartReducer;

这是购物车状态的代码

import { useState } from "react";
import { SHOW_HIDE_CART, ADD_TO_CART, REMOVE_ITEM } from "../Types";


const CartReducer = (state, action) => {
  const cartDataFromLocal = JSON.parse(localStorage.getItem('cartItem'))


  switch (action.type) {
    case SHOW_HIDE_CART: {
      return {
        ...state,
        showCart: !state.showCart,
      };
    }
    case ADD_TO_CART: {
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
  
      };
    }
    case REMOVE_ITEM: {
      return {
        ...state,
        cartItems: state.cartItems.filter(
          (item) => item._id !== action.payload
        ),
      };
    }

    default:
      return state;
  }
};
export default CartReducer;

标签： reactjslocal-storage

解决方案

我没有看到你cartDataFromLocal在任何地方使用变量，你需要在你的有效负载中使用本地存储的内容来调度操作：

// in component
dispatch(addItemToCart(cartDataFromLocal));

// in actions
const addItemToCart = (cartDataFromLocal) => (dispatch) => {
   dispatch({
      type: 'ADD_TO_CART',
      payload: cartDataFromLocal
   })
}

推荐阅读