首先，咱们来拆解你遇到的核心问题：搜索时状态短暂清空后又恢复，新结果总是和旧结果混在一起，这主要是闭包变量的误用和React状态/异步逻辑的协同问题导致的，具体来看：

主要错误点 #

1. 闭包变量url和infiniteScrollTimeout的坑 #

• 你用let声明的url是组件函数顶层的变量，每次组件渲染都会重新声明，但你在loadApiResults里直接修改它，导致它变成了一个跨渲染的“幽灵变量”。当用户搜索时，url可能已经被之前的滚动加载更新为分页地址，这时候调用loadApiResults会基于旧的分页URL加搜索参数，而不是从初始API地址请求全新的搜索结果。
• infiniteScrollTimeout是var声明的普通变量，不是React状态。useEffect里的滚动监听回调捕获的是组件初始渲染时的变量值，后续修改它根本不会影响回调里的判断——也就是说，即使你在搜索时把它设为false，滚动监听还是会触发旧的加载逻辑，把分页数据塞回状态里。

2. 对React状态更新异步性的误解 #

你在search函数里调用setapiList([])后立刻console.log(apiList)，看到的是旧值，这是因为React的状态更新是异步批量处理的，不会立刻生效。这不是直接导致结果追加的原因，但会让你误以为状态没清空，干扰排查。

3. 搜索时未暂停滚动加载逻辑 #

当用户触发搜索时，之前的滚动加载请求可能还在pending状态，或者滚动监听仍在运行，这些旧的异步操作完成后，会把旧数据再次设置到apiList里，造成“旧状态恢复”的现象。

修复方案 #

下面一步步调整你的代码，解决这些问题：

1. 把可变变量改成React状态 #

将url和滚动控制变量改成状态，避免闭包陷阱：

const Layout = () => { 
  // 用状态存储当前请求的URL，初始为API地址
  const [url, setUrl] = useState(AppConfig.api_url);
  // 用状态控制滚动加载是否可用，替代原来的infiniteScrollTimeout
  const [isScrollEnabled, setIsScrollEnabled] = useState(true);
  const [apiList, setapiList] = useState([]); 
  // 用ref获取滚动元素，替代document.getElementById
  const scrollRef = useRef(null);

2. 重构loadApiResults函数 #

让它根据是否是搜索请求，决定是替换还是追加数据，并且使用状态更新URL：

const loadApiResults = async (searchParameter = "") => {
  // 搜索时用初始API地址+搜索参数，滚动加载时用当前url状态
  const requestUrl = searchParameter 
    ? `${AppConfig.api_url}${searchParameter}` 
    : url;

  try {
    let response = await fetch(requestUrl + formurlencoded(requestObject), {
      method: "get",
      headers: headers,
    });
    let ApiResult = await response.json(); 
    if (ApiResult.status === true) {
      // 更新下一页的URL状态
      setUrl(ApiResult.next_page_url || "");
      const data = ApiResult.data;
      
      // 搜索请求：直接替换状态；滚动加载：追加到现有数据
      if (searchParameter) {
        setapiList([...data]);
      } else {
        setapiList(prevList => [...prevList, ...data]);
      }
    }
  } catch (err) {
    console.error("请求失败:", err);
  }
};

3. 优化search函数，重置状态并暂停滚动 #

搜索时清空数据、重置URL，暂时禁用滚动加载，避免旧请求干扰：

const search = (searchParameter) => { 
  // 清空现有数据
  setapiList([]);
  // 重置URL为初始地址
  setUrl(AppConfig.api_url);
  // 暂时禁用滚动加载
  setIsScrollEnabled(false);
  
  // 发起搜索请求
  loadApiResults(searchParameter);
  
  // 搜索完成后重新启用滚动加载（可根据实际需求调整时机）
  setTimeout(() => {
    setIsScrollEnabled(true);
  }, 1000);
};

4. 修复滚动监听逻辑，使用状态和ref #

用useCallback包裹loadApiResults确保闭包能获取最新状态，同时添加清理函数避免内存泄漏：

// 用useCallback缓存函数，确保依赖更新时回调能拿到最新版本
const memoizedLoadApiResults = useCallback(loadApiResults, [url]);

useEffect(() => {
  const scrollElement = scrollRef.current;
  if (!scrollElement) return;

  const handleScroll = () => {
    // 滚动加载禁用时直接返回
    if (!isScrollEnabled) return;
    
    if (
      scrollElement.scrollTop + scrollElement.clientHeight >= 
      scrollElement.scrollHeight - 10
    ) {
      setIsScrollEnabled(false);
      memoizedLoadApiResults();
      setTimeout(() => {
        setIsScrollEnabled(true);
      }, 1000);
    }
  };

  scrollElement.addEventListener("scroll", handleScroll);
  
  // 组件卸载时移除监听
  return () => {
    scrollElement.removeEventListener("scroll", handleScroll);
  };
}, [isScrollEnabled, memoizedLoadApiResults]);

// 初始加载数据
useEffect(() => {
  memoizedLoadApiResults();
}, [memoizedLoadApiResults]);

5. 更新JSX，使用ref绑定滚动元素 #

return ( 
  <ContentContainer ref={scrollRef}> 
    <Table ... /> 
  </ContentContainer> 
); 

为什么之前会出现“短暂清空又恢复”？ #

当你执行setapiList([])时，状态确实会被清空，但此时之前的滚动加载请求可能还在后台运行，或者滚动监听触发了旧的loadApiResults闭包（里面的url还是分页地址），这些旧请求完成后会把旧数据再次设置到apiList里，看起来就像“旧状态恢复”了。通过禁用滚动加载、重置URL，就能彻底避免这种冲突。

内容的提问来源于stack exchange，提问作者Shri