无法添加到 reactjs 购物车中的项目

萨贾德·塔布里兹

我在 react 和 redux 中创建了一个购物车。但是,我面临的问题是我无法将商品添加到购物车中。

以下是我的代码。

动作.js

import axios from 'axios';

export const GET_NAVBAR = "GET_NAVBAR";
export const GET_PRODUCTS = "GET_PRODUCTS";
export const GET_PRODUCT_DETAIL = "GET_PRODUCT_DETAIL";
export const ADD_CART = "ADD_CART";
export const REMOVE_CART = "REMOVE_CART"

export const BASE_API_URL = "http://localhost:3030";


export const getNavbar = () => {
    return axios.get(BASE_API_URL + '/topCategory').then(res => {
        return {
            type: GET_NAVBAR,
            payload: res.data.express.catalogGroupView
        };
    });
};

export const getProducts = (id) => {
    return axios.get(BASE_API_URL + '/category/'+id).then(res => {
        return {
            type: GET_PRODUCTS,
            payload: res.data.express.catalogEntryView
        };
    });
};

export const getProductDetail = (id) => {
    return axios.get(BASE_API_URL + '/product/'+id).then(res => {
        return {
            type: GET_PRODUCT_DETAIL,
            payload: res.data.express.catalogEntryView
        };
    });
};

export function addToCart(item) {
    return {
        type: 'ADD',
        item: item
    };
  }

  export function removeFromCart(item) {
    return {
        type: 'REMOVE',
        item: item
    };
  }

在 reducer 文件夹中,我使用了两个 js 文件 -

索引.js

import { combineReducers } from "redux";
import fashion from "./fashionReducer";
export const rootReducer = combineReducers({
    fashion: fashion
});

fashionReducer.js

import {GET_NAVBAR, GET_PRODUCTS} from "../actions";
import {GET_PRODUCT_DETAIL} from "../actions/index";
import {ADD_CART} from "../actions/index";
import {REMOVE_CART}from "../actions/index";

const INITIAL_STATE = {navbar: [], products: [], productDetail:[], cartDetail:[]};

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case GET_NAVBAR:
            return {
                ...state,
                navbar: action.payload
            };
        case GET_PRODUCTS:
            return {
                ...state,
                products: action.payload
            };
        case GET_PRODUCT_DETAIL:
            return {
                ...state,
                productDetail: action.payload
            };

        case ADD_CART:
        return{
            ...state,
            cartDetail: action.payload
        };

        case REMOVE_CART:

        const firstMatchIndex = state.indexOf(action.payload)
        return state.filter((item, index) => index!==firstMatchIndex) 

        default:
            return state;
    }
}

在下面的代码中,我有一个产品列表和一个要添加到购物车的按钮。

PDP.js

import React, {Component} from "react";
import {Route, Link, BrowserRouter} from "react-router-dom";

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {getProductDetail} from "../actions";
import { addToCart } from '../actions/index';


class PDP extends Component {

    componentDidUpdate(prevProps) {
        let currentId = this.props.match.params.id;
        let previousId = prevProps.match.params.id;
        if (currentId !== previousId) {
            this.props.getDetails(currentId);
        }
    }

    componentDidMount() {
        let {id} = this.props.match.params;
        this.props.getDetails(id);
    }

    render() {
        const {productDetail} = this.props;

        const picUrl = "https://149.129.128.3:8443";
        return (
            <div>
                <div className="container">
                    <div className="row">
                        {productDetail &&
                        productDetail.map(pdpList => {
                            return (
                                <div key={pdpList.uniqueID} className="col-md-4">
                                    <h2 key={pdpList.uniqueID}/>

                                    <img src={picUrl + pdpList.thumbnail}/>
                                    <p>
                                        Price : {pdpList.price[0].value}{" "}
                                        {pdpList.price[0].currency}
                                    </p>
                                    <button  onClick={() => this.props.addToCart(item)}>Add to Cart</button>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        productDetail: state.fashion.productDetail,
        cartDetail: state.fashion.cartDetail
    }
};

const mapActionsToProps = dispatch => {
    return bindActionCreators({
        getDetails: getProductDetail
    }, 
    {
        addToCart: item => dispatch(addToCart(item))
    },dispatch);

};


export default connect(mapStateToProps, mapActionsToProps)(PDP)

;

购物车.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { removeFromCart } from '../actions/index';

class Cart extends Component {
  render() {
    /**
     * this.props.cart is populated through the redux store and mapStateToProps
     * this.props.removeFromCart is added through mapDispatchToProps
     */
    const cartList = this.props.cart.map(( item, index) =>{
      return <div key={index}> 
        <p style={{ color: "#767676"}}>{item.name} - {item.price} $ </p>
        <button className="button" 
                onClick={ () => this.props.removeFromCart(item)} > 
          Remove 
        </button>
      </div>;
    });

    return (
      <div>
        <h1>Cart</h1>
        <div  className="cart">
          {cartList}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state, props) {
    return {
        cart: state.cartDetail
    };
}

function mapDispatchToProps(dispatch) {
    return {
        removeFromCart: pdpList => dispatch(removeFromCart(pdpList))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cart);

我得到的唯一错误是

在此处输入图片说明

有人可以帮我解决这个问题。我不知道我哪里错了。如果有人能给我提供见解,我将不胜感激。谢谢

希瓦姆

问题就在这里,<button onClick={() => this.props.addToCart(item)}>Add to Cart</button>因为itemundefined,你需要itempdpList变量替换

<button  onClick={() => this.props.addToCart(pdpList)}>Add to Cart</button>

根据问题更新现在更新问题出在这一行

const cartList = this.props.cart.map(( item, index) =>{ // this.props.cart is `undefined`

您的购物车道具是 undefined

您需要定义cartINITIAL_STATEfashionReducer.js

const INITIAL_STATE = {navbar: [], products: [], productDetail:[], cartDetail:[], cart: []};

或者你可以mapStateToProps像这样使用cartDetail(already defined)

function mapStateToProps(state, props) {
    return {
        cart: state.fashion.cartDetail // changed
    };
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将项目添加到magento的购物车中

来自分类Dev

将项目添加到magento的购物车中

来自分类Dev

将项目添加到AngularJS的购物车中

来自分类Dev

在Magento中向购物车项目添加属性,在购物车中单独显示

来自分类Dev

将项目添加到购物车Django Python

来自分类Dev

将项目添加到购物车

来自分类Dev

添加到购物车按钮未在购物车中添加产品

来自分类Dev

添加到购物车按钮未在购物车中添加产品

来自分类Dev

Codeigniter购物车无法添加项目

来自分类Dev

添加挂钩以删除woocommerce购物车中的项目

来自分类Dev

无法从购物车android studio中删除项目

来自分类Dev

在添加到购物车中的特定产品之前,先清空购物车

来自分类Dev

在Woocommerce中隐藏添加到购物车消息

来自分类Dev

产品未添加到Codeigniter购物车中

来自分类Dev

Woocommerce-添加到购物车缺货中

来自分类Dev

无法添加到购物车类别

来自分类Dev

如何在购物车页面中添加/更新自定义购物车项目数据

来自分类Dev

PHP购物车添加项目

来自分类Dev

localStorage 添加到购物车

来自分类Dev

将项目添加到python中的购物车时如何将字典项目减少一

来自分类Dev

2个左侧设计的列在“添加到购物车”页面中无法正常工作?

来自分类Dev

如果购物车中的商品数为三,则隐藏-添加到购物车| 购物

来自分类Dev

Woocommerce中项目缺货(可用缺货)时,更改存档页面上的“添加到购物车”按钮文本

来自分类Dev

WooCommerce:删除档案中的“添加到购物车”按钮,但不在购物车中

来自分类Dev

如果购物车中已存在商品-reactjs,如何更新购物车数量?

来自分类Dev

WooCommerce添加到购物车验证:阻止添加到购物车

来自分类Dev

如果购物车中该产品的数量超过10,则禁用该产品添加到购物车按钮

来自分类Dev

WooCommerce从购物车中删除所有产品,并将当前产品添加到购物车

来自分类Dev

Laravel将具有相同产品的购物车按钮添加到+1数量的购物车中

Related 相关文章

  1. 1

    将项目添加到magento的购物车中

  2. 2

    将项目添加到magento的购物车中

  3. 3

    将项目添加到AngularJS的购物车中

  4. 4

    在Magento中向购物车项目添加属性,在购物车中单独显示

  5. 5

    将项目添加到购物车Django Python

  6. 6

    将项目添加到购物车

  7. 7

    添加到购物车按钮未在购物车中添加产品

  8. 8

    添加到购物车按钮未在购物车中添加产品

  9. 9

    Codeigniter购物车无法添加项目

  10. 10

    添加挂钩以删除woocommerce购物车中的项目

  11. 11

    无法从购物车android studio中删除项目

  12. 12

    在添加到购物车中的特定产品之前,先清空购物车

  13. 13

    在Woocommerce中隐藏添加到购物车消息

  14. 14

    产品未添加到Codeigniter购物车中

  15. 15

    Woocommerce-添加到购物车缺货中

  16. 16

    无法添加到购物车类别

  17. 17

    如何在购物车页面中添加/更新自定义购物车项目数据

  18. 18

    PHP购物车添加项目

  19. 19

    localStorage 添加到购物车

  20. 20

    将项目添加到python中的购物车时如何将字典项目减少一

  21. 21

    2个左侧设计的列在“添加到购物车”页面中无法正常工作?

  22. 22

    如果购物车中的商品数为三,则隐藏-添加到购物车| 购物

  23. 23

    Woocommerce中项目缺货(可用缺货)时,更改存档页面上的“添加到购物车”按钮文本

  24. 24

    WooCommerce:删除档案中的“添加到购物车”按钮,但不在购物车中

  25. 25

    如果购物车中已存在商品-reactjs,如何更新购物车数量?

  26. 26

    WooCommerce添加到购物车验证:阻止添加到购物车

  27. 27

    如果购物车中该产品的数量超过10,则禁用该产品添加到购物车按钮

  28. 28

    WooCommerce从购物车中删除所有产品,并将当前产品添加到购物车

  29. 29

    Laravel将具有相同产品的购物车按钮添加到+1数量的购物车中

热门标签

归档