React中Autosuggest组件REST API请求延迟导致联想失效求助

一、先解决核心问题：请求竞态导致的联想项错误 #

你遇到的是典型的请求竞态问题——输入"Стрий"时发起的新请求，反而比输入"Стри"时的旧请求更早完成，旧请求返回后覆盖了最新的联想数据。可以通过以下两种方式解决：

1. 使用AbortController取消旧请求 #

在组件中维护一个AbortController实例，每次发起新请求前取消未完成的旧请求：

import { useState, useRef, useEffect } from 'react';

const YourComponent = () => {
  const [value, setValue] = useState('');
  const [cities, setCities] = useState<any[]>([]);
  const abortControllerRef = useRef<AbortController | null>(null);

  const onChange = (event, { newValue, method }) => {
    setValue(newValue);
    
    // 取消之前未完成的请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    // 新建控制器发起请求
    abortControllerRef.current = new AbortController();
    serviceOsago.getCityCode(newValue, { signal: abortControllerRef.current.signal })
      .then((response: any) => {
        setCities(response);
      })
      .catch((error: any) => {
        // 忽略请求取消的错误
        if (error.name !== 'AbortError') {
          console.error('请求失败:', error);
        }
      });
  };

  // 组件卸载时取消未完成的请求
  useEffect(() => {
    return () => {
      abortControllerRef.current?.abort();
    };
  }, []);

  // ... 其他组件逻辑
};

注意：需要确保serviceOsago.getCityCode支持接收signal参数，并传递给底层的fetch/axios请求（axios v0.22.0+支持AbortController）

2. 用请求ID标记有效请求 #

如果无法修改API请求方法，可通过维护最新请求ID的方式，仅在返回数据对应最新请求时更新状态：

import { useState, useRef } from 'react';

const YourComponent = () => {
  const [value, setValue] = useState('');
  const [cities, setCities] = useState<any[]>([]);
  const latestRequestId = useRef(0);

  const onChange = (event, { newValue, method }) => {
    setValue(newValue);
    const currentRequestId = ++latestRequestId.current;

    serviceOsago.getCityCode(newValue)
      .then((response: any) => {
        // 仅当当前请求是最新的时更新状态
        if (currentRequestId === latestRequestId.current) {
          setCities(response);
        }
      });
  };

  // ... 其他组件逻辑
};

二、优化请求触发时机：防抖（Debounce） #

避免每个字符输入都触发请求，添加防抖逻辑，仅在用户停止输入300ms左右后发起请求：

import { useState, useCallback, useEffect } from 'react';

// 自定义防抖函数
const debounce = (func: Function, delay: number) => {
  let timeoutId: NodeJS.Timeout;
  const debounced = (...args: any[]) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
  debounced.cancel = () => clearTimeout(timeoutId);
  return debounced;
};

const YourComponent = () => {
  const [value, setValue] = useState('');
  const [cities, setCities] = useState<any[]>([]);
  const abortControllerRef = useRef<AbortController | null>(null);

  // 防抖后的请求函数
  const fetchCities = useCallback(debounce((inputValue: string) => {
    abortControllerRef.current?.abort();
    abortControllerRef.current = new AbortController();

    serviceOsago.getCityCode(inputValue, { signal: abortControllerRef.current.signal })
      .then((response: any) => {
        setCities(response);
      })
      .catch((error: any) => {
        if (error.name !== 'AbortError') {
          console.error('请求失败:', error);
        }
      });
  }, 300), []);

  const onChange = (event, { newValue, method }) => {
    setValue(newValue);
    fetchCities(newValue);
  };

  useEffect(() => {
    return () => {
      abortControllerRef.current?.abort();
      fetchCities.cancel(); // 取消未执行的防抖请求
    };
  }, [fetchCities]);

  // ... 其他组件逻辑
};

三、关于全量数据存储的备选方案 #

如果确实需要全量加载12-15MB数据，localStorage（通常限制5MB）无法存储，可选择：

• IndexedDB：浏览器原生大容量存储方案，适合存储结构化大数据，可通过dexie.js等库简化React中的操作；
• 全局状态管理：将数据存在Redux、Zustand等全局状态中，但页面刷新后会丢失，需重新加载；
• Session Storage：存储限制同样约5MB，会话结束后失效，不适合你的场景。

不过全量加载10秒的用户体验极差，按需加载+防抖+请求竞态处理仍是最优选择。

四、最终最优方案总结 #

1. 用AbortController解决请求竞态，确保旧请求不会覆盖新数据；
2. 给请求添加防抖，减少不必要的API调用，提升性能；
3. 保持按需加载策略，避免全量加载的长等待时间；
4. 若需离线支持，再考虑用IndexedDB缓存全量数据。

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