业务场景:滑动鼠标滚轮动态加载数据
每次滚动鼠标滚轮,发送请求后台返回分页数据,分页中使用的page和size保存在state中, 由于state中的数据更新延迟,如果滚动鼠标滚轮过快,就会发送page和size相同的http请求,导致加载重复数据。
解决方法一:每次发送请求时,page不修改,只修改size大小,然后把新返回的数据覆盖原有数据,即使多次发送重复请求在页面也不会显示出重复数据的问题
伪代码如下:
import React, { Component } from 'react'
export default class page extends Component {
state = {
page:1,
//控制每页返回的条数
size:10,
data:{},
//标志是否已返回全部数据
isAll:false,
}
onWheel = ()=>{
if(this.state.isAll)
{
return
}
let requestData={"page":1,"size":this.state.size}
this.http(requestData)
}
http = (data) =>{
//发送http请求
post(data).then(
request =>{
//如果返回10条数据,则this.state.size+10
let newsize = this.state.size+10
this.setstate({
size:newsize,
data:request.data
})
//如果返回的数据小于10条,则修改this.state.isAll=true
this.setstate({
isAll:true,
data:request.data
})
}
)
}
render() {
return (
<div>
{
this.state.data
}
</div>
)
}
}
解决方案二:
额外定义一个g_Page变量和state中的page进行比较,如果page小于state.page则发送请求,每次发送请求后将g_Page重置为state.page;如果不小于则不发送请求,新数据追加到老数据后面,这样可以防止发送重复请求到服务器,减轻服务器压力
伪代码如下:
import React, { Component } from 'react'
const g_page = 1
export default class page extends Component {
state = {
page:1,
size:10,
data:{},
//用来标志是否已请求到所有数据
isAll:false
}
onWheel = ()=>{
if(this.state.isAll)
{
return
}
if(g_page<this.state.page)
{
let requestData={"page":1,"size":this.state.size}
this.http(requestData)
g_page=this.state.page
}
}
http = (data) =>{
//发送http请求
post(data).then(
request =>{
//如果返回10条数据,则page+1
let page = this.state.page
this.setstate({
page:page+1,
data:this.state.data+request.data
})
//如果返回的数据小于10条,则修改state.isAll=true
this.setstate({
isAll:true,
data:this.state.data+request.data
})
}
)
}
render() {
return (
<div>
{
this.state.data
}
</div>
)
}
}