苹果系统H5下拉加载事件重复触发（react hooks）

最新推荐文章于 2025-12-19 15:39:53 发布

原创

最新推荐文章于 2025-12-19 15:39:53 发布 · 779 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

本文讲述了在iOS端的H5/小程序中，由于滚动到底部触发加载更多数据时出现重复加载问题。通过使用React的`useCallback`配合`debounce`实现防抖，但遇到闭包问题导致数据不完整。优化方案是引入新的state并监听其变化来触发`handleSearch`，确保每次正确加载数据。

文章目录

问题描述
解决思路
引发的问题
优化后的代码

问题描述

ios端手机下的h5/小程序，滚动到底部时加载更多数据，但是滚动到底部时重复触发加载事件，在安卓机下则不会发生该问题，记录一下解决方案。

解决思路

为了防止下拉事件重复触发，对下拉事件做一次防抖处理：

import {
   
    useState, useRef, useCallback } from 'react';
import debounce from 'lodash/debounce';

const paramPageRef = useRef(1)
const [searchResult, setSearchResult] = useState([]);


  // 防抖查询
  const debounceSearch = useCallback(
    debounce(() => handleSearch (), 300),
    [],
  );
  
 // 接口查询数据
 const handleSearch = async () => {
   
   
    const params = {
   
   
    	// 一些参数
      county: selectedArea.regionName,
      address: searchKey,
      ...stableParams,
      currentPage: paramPageRef.current,

    }