A mixed application that uses react to do supermarket shopping APP, encounters a problem when making a shopping cart.
the goods in the shopping cart are divided according to the supermarket, but the data returned from the back end is an array [{Commodity 1, supermarket 1}, {Commodity 2, supermarket 1}, {Commodity 3, supermarket 2}], putting the goods of the same supermarket together and dealing with them in pages. How to achieve the following effect
I tried to declare a variable to save the information about the last supermarket and make a judgment during traversal, but when I loaded more, the previously displayed supermarket name disappeared. Here is my code:
<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}
:""}
<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 className="car-goods-guige">:{item.standard || ""}
<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>
)
})}