react实现购物车页面逻辑

子羽
  • 136

使用react做一个超市购物的混合应用APP,在做购物车时遇到一个问题
购物车里的商品按照超市划分,但是后端返回的数据是一个数组[{商品1,超市1},{商品2,超市1},{商品3,超市2}],将同一个超市的商品放在一块,有分页处理,如何实现如下的效果
图片描述

我尝试声明一个变量保存最后一个超市的信息,在遍历时进行判断,但是在我加载更多时,之前已经显示的超市名称消失了,以下是我的代码:

<div>
                    {this.state.dataSource.map((item,index)=>{
                        if(item.marketName === marketName){
                            loadMarketname = false
                        }else{
                            loadMarketname = true;
                            marketName = item.marketName;
                        }
                        return (
                            <div key={index}>
                                {loadMarketname?
                                <p className="car-marketname" style={index===0?{borderTop:"0"}:{}}>
                                    <span onClick={()=>this.check(item.marketInfoId,true)} className="iconfont icon-webicon206" style={{display:"inline-block",width:"40px",height:"40px",textAlign:"center",lineHeight:"40px",fontSize:"30px"}}></span>
                                    {item.marketName}
                                </p>:""}
                                <div className="car-goods-item" flex="box:first">
                                    <div style={{width:"150px"}}>
                                        <span onClick={()=>this.check(item.goodsInfoId)} className={this.state.checkedObj[item.goodsInfoId]?"iconfont icon-xuanzhong":"iconfont icon-webicon206"} style={{display:"inline-block",width:"40px",height:"40px",textAlign:"center",lineHeight:"40px",fontSize:"30px"}}></span>
                                        <img style={{width:"110px",height:"100px"}} src={`${Tool.IP}/szhg-ydcsWeb/ydcsPhone/goodsInfo/downloadGoodsPicture?goodsPictureName=${item.mainGoodsPictureName}&session=${Tool.SESSION}&goodsInfoId=${item.goodsInfoId}`} alt="" />
                                    </div>
                                    <div>
                                        <p className="car-goods-name">{item.goodsName || ""}</p>
                                        <p className="car-goods-guige">规格:{item.standard || ""}</p>
                                        <div className="car-goods-num" flex="box:last cross:center">
                                            <span className="goods-price font16">¥{item.goodsPrice || ""}</span>
                                            <div className="car-goods-numbox" flex="cross:center">
                                                <button onClick={(e)=>this.reduce(item.shopCartId,item.goodsNumber,e)} className="car-goods-btn">-</button>
                                                <span>{item.goodsNumber}</span>
                                                <button onClick={(e)=>this.add(item.shopCartId,item.goodsNumber,e)} className="car-goods-btn">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
回复
阅读 3.1k
2 个回答

建议逻辑和页面展示分开,先对数据进行处理,可以先定义一个对象,然后超市作为属性名,商品作为超市属性的值[值可以是一个数组],然后再对数据进行渲染,加载更多的时候只需要更改对象就行

渲染前先对数组做下筛选,将不同的超市商品用不同的数组包装。例如:

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏