hooks使用useEffect监听pagination快速点击分页一直请求记录

问题

react hooks使用useEffect监听pagination快速点击分页一直请求记录

描述

使用react hooks做一个分页加载数据，使用useState,useEffect API，实现思路当分页变化 时触发onchange事件，在onchange事件中更新pagination的currentPage当前页，使用useEffetc监听pagination.currentPage，变化时调请求获取表格数据列表this.getTableData。

出现问题

在正常点击中，上述实现方法没有任何问题；但是，在快速切换分页时会出现大量请求接口，如快速来回切换 5,6,8。请求接口中会大量重复请求5,6,7页数据,极为诡异

解决

大致问题排查如下，经测试，使用react hooks在render中会实时响应当前值 的修改，但是在异常操作中如setTimout,axios请求中当我们更新状态的时候,React 会重新渲染组件, 每一次渲染都会拿到独立的 count 状态, 并重新渲染一个 handleAlertClick 函数. 每一个 handleAlertClick 里面都有它自己的 count .

最终结果是 在count为6的时候, 点击 show alert , 再继续增加 count , 弹出的值为 6, 而非 10.

如何让点击时候弹出实时的 count ?

使用useRef记录实时的一个值,并使用useEffect监听更新ref.current的值

使用antd加载分页数据 的场景

     //搜索条件字段
    const [searchData, setSearchData] = useState(Object.assign({}, defaultFilter));
    //分页字段
    const [paginationData, setPaginationData] = useState({ total: 1000, currentPage: 1, pageSize: 10 });
    //表格数据 
    const [tableData, setTableData] = useState([]);
       const lastPage = useRef(paginationData.currentPage);

  

//页码变化
    const pageChange = page => {
        let pagination = Object.assign({}, paginationData);
        pagination.currentPage = page;
        setPaginationData(pagination);
    }


    //获取表格数据 
    const getTableData = async () => {
        let { currentPage, pageSize } = paginationData;
        let { name, type, time } = searchData;
        let obj = {
        };
        if (name) {
            obj["username"] = name;
        }
        if (type) {
            obj["titleType"] = [type]
        }
        if (time) {
            obj["startTime"] = time[0];
            obj["endTime"] = time[1];
        }
        const result = await post(`${getLogsList}?pageIndex=${currentPage}&pageSize=${pageSize}`, obj);
        let { ret, data = [], count } = result.data;
        if (ret === success) {
            setTableData(data);
            setPaginationData({...paginationData,total:count,currentPage: lastPage.current}); 
        }
    }
    useEffect(()=>{
        lastPage.current = paginationData.currentPage;
    },[paginationData.currentPage]);


    useEffect(() => {
       getTableData();
    }, [searchData, paginationData.currentPage])

参考链接: https://zhuanlan.zhihu.com/p/105276393