javascript - 用户滚动时如何处理显示错误

Question

我正在开发一个 Web 应用程序，显示当前用户登录的所有可管理商店。客户端上有一个数组，继续从数据库接收商店。

从 react 的角度来看，渲染中的商店如下所示，

//display all shops
...
let shops=appState.shops;
...
for (let i = 0; i < shops.length; i += 2) {
...
    //e1 and e2 are 2 shop information display areas aligned in a row
    shopViews.push(<div key= {`shopView${i}`} style = {{width: '100%'}}>{e1}{e2}</div>);
...
}
return (<{ShopViews}>);

当滚动查看区域时，应用程序检测用户是否到达应用程序底部。

handleScroll=(event)=>{
    //show waiting circle when the user reaches the page bottom. 
    //this indicates that the user should wait until the new fetch finishes.
};

但是，当我向上滚动时——显示的商店已经进入——我发现像下面这样的显示错误经常发生。

正常显示是

有什么想法可以解决这个显示问题吗？任何事情都是受欢迎的。

Answer 1

错误显示是由渲染和同时滚动的组合引起的。因此，我将控制流更改为仅在滚动到当前页面的最底部时呈现。