荣耀手机详情页 - 购物车

import React, { useState, useEffect } from 'react'; import './index.scss'; import { Swiper } from 'antd-mobile'; import { connect } from 'react-redux'; import { addCartAction } from '../../store/actions/cart'; import axios from 'axios';

import phone1 from '../../img/phone2.png'; import phone2 from '../../img/phone3.png'; import phone3 from '../../img/phone4.png';

const CartContent = (props) => { const [img, setImg] = useState([]); const [itemObj, setItemObj] = useState({});

const token = props.token;

useEffect(() => {
    const { id } = props.match.params;

    axios
        .get(
            `/queryPrdDisplayDetailInfo?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&item_id=${id}&sbomCode=8086110027003&productId=${id}`
        )
        .then((res) => {
            setItemObj(res.data);
            setImg(res.data.sbomList[0].groupPhotoList);
        });
}, []);

const addCartFn = () => {
    if (token !== '') {
        const { disPrdId, name } = itemObj;
        const { photoPath, photoName } = itemObj.sbomList[0];
        const data = {
            id: disPrdId,
            name: name,
            num: 1,
            price: itemObj.sbomList[0].price || 0,
            pic: `https://hshop.honorfile.com/pimages/cnqx/${photoPath}800_800_${photoName}`,
        };
        props.addCartAction(data);
        props.history.push('/Cart');
    } else {
        props.history.push('/Login');
    }
};

return (
    <div className='cart_content'>
        <Swiper loop>
            {img.map((item, index) => (
                <Swiper.Item key={index}>
                    <img
                        src={`https://hshop.honorfile.com/pimages/cnqx/${item.photoPath}800_800_${item.photoName}`}
                        alt=''
                    />
                </Swiper.Item>
            ))}
        </Swiper>
        <div className='titl'>
            {itemObj.sbomList != undefined ? (
                <div className='pric'>￥{itemObj.sbomList[0].price}</div>
            ) : (
                ''
            )}
            {itemObj.sbomList != undefined ? (
                <div className='tit'>{itemObj.sbomList[0].name}</div>
            ) : (
                ''
            )}

            <div className='tit2'>{itemObj.briefName}</div>
            {itemObj.sbomList != undefined ? (
                <div className='titl3'>{itemObj.sbomList[0].sbomPromWord}</div>
            ) : (
                ''
            )}
            {/* <div className='titl3'>①荣耀Magic Vs部分版本可享积分20倍膨胀最高抵现100元</div>
                <div className='titl3'>②购机再返5倍积分</div> */}
        </div>
        <div className='type5'>
            <div className='item'>
                {/* <div>
                        <i className='iconfont icon-guige'></i>
                        <span>规格</span>
                    </div>
                    <div>
                        已选：幻夜黑 5G全网通 8GB+256GB
                    </div> */}
            </div>
        </div>
        <div className='foote flex1'>
            <div>
                <i className='iconfont icon-kefu'></i>
                <div>客服</div>
            </div>
            <div>
                <i className='iconfont icon-shoucang'></i>
                <div>收藏</div>
            </div>
            <div>
                {/* <i className='iconfont icon-gouwuche'></i> */}
                <div>购物车</div>
            </div>
            <button className='gocart' onClick={addCartFn}>
                加入购物车
            </button>
            <button className='buy1'>立即购买</button>
        </div>
    </div>
);

};

export default connect( (state) => ({ cart: state.cart, token: state.user.token }), { addCartAction } )(CartContent); 把里面的navigate改正内容：为props.history.push即可。原因是该组件并没有导入navigate，而是通过props.history来进行路由跳转。