堆栈内存溢出
  繁体   English   中英

与 redux 购物车反应原生

[英]React native with redux shopping cart

 原文  2020-05-05 07:47:21  5   2    javascript/ reactjs/ react-native/ react-redux

问题描述

我正在尝试在本机反应中创建购物车，我的问题是每当我将产品添加到购物车时，它都是通过以下操作添加的：

export const addToCart =  (item) => {
    return (dispatch) =>{
        dispatch({
            type:ADD_TO_CART, 
            payload: {item}});        
      }             
}

这是减速机：

import {REMOVE_FROM_CART,ADD_TO_CART,UPDATE_CART_QUANTITY,GET_CATEGORIES, GET_PRODUCTS,
     MODAL_STATE,MODAL_STATE_HIDE,ADDRESS_CHANGED,SELECTED_ITEMS} from  '../actions/types';

const INITIAL_STATE = {
    products:'',
    cart:[],
    category:'',
    isVisible:false,
    address:'',
    selectedItem:[]
}

export default function(state=INITIAL_STATE, action){
    let cart = state.cart;
    switch(action.type){
        case ADD_TO_CART:
            return{...state, cart:[...state.cart, action.payload]}
        case REMOVE_FROM_CART:
            return{cart:[...state.cart.filter(item => item.id != action.payload)]}
            // {...state, cart:[...state.cart.filter((id)=>{ id !== action.payload})]}
       case UPDATE_CART_QUANTITY:
        return {
            ...state,
            cart: state.cart.map(cart=> cart.id === action.payload.item.id ?
             { ...cart, quantity: action.payload.value} :
              cart
            )
          };
        case GET_CATEGORIES:
            return{...state, category:action.payload}
         case GET_PRODUCTS:
                return{...state, products:action.payload}
        case MODAL_STATE:
            return{...state, isVisible:true}
         case MODAL_STATE_HIDE:
                return{...state, isVisible:false}
        case ADDRESS_CHANGED:
            return{...state, address:action.payload}
        case SELECTED_ITEMS:
            return{...state, selectedItem:[...state.selectedItem, action.payload]}
        default:
            return state
    }
}

但是当我尝试通过将 state 映射到购物车组件中的道具来访问购物车时，它返回 undefined is not an object，当控制台记录来自购物车组件的 typeof(cart) 时，它说它是 ZA8CFDE6331BD59EB2AC96F8911B666Z：

这是mapstatetoprops function：

const mapStateToProps = (state) => {
    return{
        cartItems:state.product_reducer.cart,
        modalValue:state.product_reducer.isVisible,
        total: state.product_reducer.cart.reduce(
          in the array
          (accumulatedTotal, cartItem) =>
            accumulatedTotal + cartItem.price * cartItem.quantity,
          0 
        )
    }


}

这是我添加到购物车中的 json 产品数据，其中有两个产品的 ID 为 7 和 8：

{
    "product": [
        {
            "id": 8,
            "name": "asad",
            "quantity": 1,
            "type": "already",
            "description": null,
            "price": "20000.00",
            "ingredients": null,
            "deliveryfee": "0.00",
            "supplier": null,
            "duration": "3",
            "category_id": 3,
            "created_at": "2020-05-03 15:03:23",
            "updated_at": "2020-05-03 15:03:23",
            "deleted_at": null,
            "photo": {
                "id": 19,
                "model_type": "App\\Product",
                "model_id": 8,
                "collection_name": "photo",
                "name": "5eaedd370c100_jamies-iced-green-tea",
                "file_name": "5eaedd370c100_jamies-iced-green-tea.jpg",
                "mime_type": "image/jpeg",
                "disk": "public",
                "size": 36610,
                "manipulations": [],
                "custom_properties": {
                    "generated_conversions": {
                        "thumb": true
                    }
                },
                "responsive_images": [],
                "order_column": 19,
                "created_at": "2020-05-03 15:03:24",
                "updated_at": "2020-05-03 15:03:24",
                "url": "http://192.168.0.112/kwenu/storage/app/public/19/5eaedd370c100_jamies-iced-green-tea.jpg",
                "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/19/conversions/5eaedd370c100_jamies-iced-green-tea-thumb.jpg"
            },
            "sliderimages": [],
            "tags": [
                {
                    "id": 1,
                    "name": "Avocado",
                    "supplier": null,
                    "created_at": "2020-04-23 09:35:00",
                    "updated_at": "2020-04-23 09:35:00",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 8,
                        "product_tag_id": 1
                    },
                    "media": []
                },
                {
                    "id": 2,
                    "name": "cushew",
                    "supplier": "Fruit Salads",
                    "created_at": "2020-04-27 13:03:35",
                    "updated_at": "2020-04-27 13:03:35",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 8,
                        "product_tag_id": 2
                    },
                    "media": []
                }
            ],
            "media": [
                {
                    "id": 19,
                    "model_type": "App\\Product",
                    "model_id": 8,
                    "collection_name": "photo",
                    "name": "5eaedd370c100_jamies-iced-green-tea",
                    "file_name": "5eaedd370c100_jamies-iced-green-tea.jpg",
                    "mime_type": "image/jpeg",
                    "disk": "public",
                    "size": 36610,
                    "manipulations": [],
                    "custom_properties": {
                        "generated_conversions": {
                            "thumb": true
                        }
                    },
                    "responsive_images": [],
                    "order_column": 19,
                    "created_at": "2020-05-03 15:03:24",
                    "updated_at": "2020-05-03 15:03:24",
                    "url": "http://192.168.0.112/kwenu/storage/app/public/19/5eaedd370c100_jamies-iced-green-tea.jpg",
                    "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/19/conversions/5eaedd370c100_jamies-iced-green-tea-thumb.jpg"
                }
            ]
        },
        {
            "id": 7,
            "name": "Fruity",
            "quantity": 1,
            "type": "own",
            "description": null,
            "price": "18000.00",
            "ingredients": null,
            "deliveryfee": "0.00",
            "supplier": null,
            "duration": "1",
            "category_id": 2,
            "created_at": "2020-05-03 11:06:52",
            "updated_at": "2020-05-03 11:06:52",
            "deleted_at": null,
            "photo": {
                "id": 18,
                "model_type": "App\\Product",
                "model_id": 7,
                "collection_name": "photo",
                "name": "5eaea5c67a659_grilledchicken",
                "file_name": "5eaea5c67a659_grilledchicken.jpg",
                "mime_type": "image/jpeg",
                "disk": "public",
                "size": 13069,
                "manipulations": [],
                "custom_properties": {
                    "generated_conversions": {
                        "thumb": true
                    }
                },
                "responsive_images": [],
                "order_column": 18,
                "created_at": "2020-05-03 11:06:53",
                "updated_at": "2020-05-03 11:06:56",
                "url": "http://192.168.0.112/kwenu/storage/app/public/18/5eaea5c67a659_grilledchicken.jpg",
                "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/18/conversions/5eaea5c67a659_grilledchicken-thumb.jpg"
            },
            "sliderimages": [],
            "tags": [
                {
                    "id": 1,
                    "name": "Avocado",
                    "supplier": null,
                    "created_at": "2020-04-23 09:35:00",
                    "updated_at": "2020-04-23 09:35:00",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 7,
                        "product_tag_id": 1
                    },
                    "media": []
                },
                {
                    "id": 2,
                    "name": "cushew",
                    "supplier": "Fruit Salads",
                    "created_at": "2020-04-27 13:03:35",
                    "updated_at": "2020-04-27 13:03:35",
                    "deleted_at": null,
                    "picture": [],
                    "pivot": {
                        "product_id": 7,
                        "product_tag_id": 2
                    },
                    "media": []
                }
            ],
            "media": [
                {
                    "id": 18,
                    "model_type": "App\\Product",
                    "model_id": 7,
                    "collection_name": "photo",
                    "name": "5eaea5c67a659_grilledchicken",
                    "file_name": "5eaea5c67a659_grilledchicken.jpg",
                    "mime_type": "image/jpeg",
                    "disk": "public",
                    "size": 13069,
                    "manipulations": [],
                    "custom_properties": {
                        "generated_conversions": {
                            "thumb": true
                        }
                    },
                    "responsive_images": [],
                    "order_column": 18,
                    "created_at": "2020-05-03 11:06:53",
                    "updated_at": "2020-05-03 11:06:56",
                    "url": "http://192.168.0.112/kwenu/storage/app/public/18/5eaea5c67a659_grilledchicken.jpg",
                    "thumbnail": "http://192.168.0.112/kwenu/storage/app/public/18/conversions/5eaea5c67a659_grilledchicken-thumb.jpg"
                }
            ]
        }
    ]
}

问题不是 STATE 作为对象数组返回购物车，它返回一个 OBJECT 对象，提前谢谢你

2 个解决方案

解决方案1
 0  2020-05-05 11:32:07

我看到 addToCart 操作将有效负载作为 object { item } 并且您尝试通过 action.payload 在没有 item 的情况下访问 reducer

所以你可以改变

case ADD_TO_CART:
            return{...state, cart:[...state.cart, action.payload.item]}

或者只是将添加到购物车更新为这样 && 所有操作都应该相同

export const addToCart =  (payload) => {
    return (dispatch) =>{
        dispatch({
            type:ADD_TO_CART, 
            payload    
      }             
}

解决方案2
 0  2020-05-07 06:15:30

通过更改减速器中的购物车数组的名称来修复它

const INITIAL_STATE = {
    products:'',

大车：[]，

    category:'',
    isVisible:false,
    address:'',
    selectedItem:[]
}

至：

const INITIAL_STATE = {
    products:'',

购物车：[]，

    category:'',
    isVisible:false,
    address:'',
    selectedItem:[]
}

并创建一个 class function 用于渲染购物车组件中的项目，我提供给平面列表中的渲染项 function 现在购物车返回一个对象数组。 感谢您的关注

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 redux 响应原生购物车 React 和 Redux 购物车，加入购物车动作 （React 和 Redux）将商品添加到购物车的问题 购物车实施 React-Redux React-Redux 购物车 - 减少/增加商品数量 React Redux 如何更新购物车中的产品数量 在 React/Redux 中，如何计算购物车的总价 如何使用 React Redux 更新购物车中的商品数量 无法在React Redux Reducer中从购物车中删除商品 Redux增加购物车中的数量
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM