[网络协议]react由于state内容更新延迟导致http请求重复发送问题

业务场景：滑动鼠标滚轮动态加载数据
每次滚动鼠标滚轮，发送请求后台返回分页数据，分页中使用的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>
        )
    }
}