使用 redux 购物车反应原生答案

【问题标题】：React native with redux shopping cart使用 redux 购物车反应原生
【发布时间】：2020-08-19 19:43:33
【问题描述】：

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

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
    }
}

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

这是 mapstatetoprops 函数：

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 产品数据，有两个产品的 7 和 8 作为 id：

{
    "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"
                }
            ]
        }
    ]
}

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

【问题讨论】：

标签： javascript reactjs react-native react-redux

【解决方案1】：

我看到 addToCart 操作将有效负载作为对象 { item } 并且您尝试通过 action.payload 在 reducer 中访问而不使用 item

所以你可以改变

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

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

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

【讨论】：

我已经尝试了所有这些，但都返回数组[未定义，未定义]
这是它在您建议的更改之前返回的购物车数组，我不明白的是数组数组[{ {object1}, {object 2} }] 内的对象的一个对象
我可以看看你如何将数据发送到操作（屏幕中的调度功能）

【解决方案2】：

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

const INITIAL_STATE = {
    products:'',

购物车：[]，

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

到：

const INITIAL_STATE = {
    products:'',

购物车：[]，

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

以及创建一个类函数来渲染购物车组件中的项目，我提供给平面列表中的 renderitem 函数，现在购物车返回一个对象数组。谢谢你的关心

【讨论】：