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