Implementation of Shopping cart Page Logic with react

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> ) })}
Mar.17,2022

it is recommended to separate the logic from the page display. First, you can process the data. You can define an object first, then the supermarket is used as the attribute name, and the value of the commodity as the supermarket attribute [the value can be an array], and then render the data. When loading more, you only need to change the object


.

filter the array before rendering, and package different supermarket items in different arrays. For example:

clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b4da-33e4f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b4da-33e4f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?