堆棧內存溢出
  簡體   English   中英

與 redux 購物車反應原生

[英]React native with redux shopping cart

 原文  2020-05-05 07:47:21  6   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