如何在API调用中使用useTransition？Autocomplete连续输入异常排查

错误原因 #

1. 误用useTransition的pending状态：你用pending来判断是否触发API调用是核心问题。pending是React内部标记"是否有正在进行的过渡更新"的状态，连续输入时，前一次startTransition触发的更新还在处理中（pending为true），最后一次输入的!pending条件不成立，导致API请求没被触发。
2. 对useTransition的定位误解：它的作用是标记非紧急更新（比如搜索结果列表渲染）延后执行，优先处理紧急更新（比如输入框内容变化），本身没有延迟执行的能力，不能直接替代防抖（debounce）逻辑。

最优实现方式 #

正确的做法是把防抖逻辑交给专门的防抖函数或钩子，useTransition只用来优化更新优先级，避免UI阻塞。

方式1：自定义防抖函数结合useTransition #

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

// 自定义防抖函数
const debounce = (fn, delay) => {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
};

const Autocomplete = (props) => {
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState([]);
  const [pending, startTransition] = useTransition();

  // 用useCallback缓存防抖函数，避免重复创建
  const debouncedSearch = useCallback(debounce((value) => {
    if (value.length > 1) {
      props.searchService(
        { phrase: value },
        (status, data) => {
          // 用startTransition标记列表更新为非紧急任务
          startTransition(() => {
            setOptions(data.result);
          });
        }
      );
    } else {
      startTransition(() => {
        setOptions([]);
      });
    }
  }, 300), [props.searchService]);

  const handleChange = (value) => {
    setInputValue(value);
    debouncedSearch(value);
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => handleChange(e.target.value)}
        placeholder="输入搜索关键词..."
      />
      {pending && <div>加载中...</div>}
      <ul>
        {options.map(opt => (
          <li key={opt.id}>{opt.name}</li>
        ))}
      </ul>
    </div>
  );
};

方式2：使用useDebounce钩子（基于react-use库） #

如果项目中已经引入react-use库，代码会更简洁：

import { useState, useTransition } from 'react';
import { useDebounce } from 'react-use';

const Autocomplete = (props) => {
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState([]);
  const [pending, startTransition] = useTransition();

  // 监听inputValue变化，延迟300ms后执行搜索逻辑
  useDebounce(() => {
    if (inputValue.length > 1) {
      props.searchService(
        { phrase: inputValue },
        (status, data) => {
          startTransition(() => {
            setOptions(data.result);
          });
        }
      );
    } else {
      startTransition(() => {
        setOptions([]);
      });
    }
  }, 300, [inputValue, props.searchService]);

  const handleChange = (value) => {
    setInputValue(value);
  };

  // UI部分同上
};

核心思路总结 #

• 防抖逻辑交给专门的防抖函数/钩子，确保连续输入停止后才触发API请求；
• useTransition只用来标记搜索结果的更新为非紧急任务，让输入框的内容更新优先执行，提升UI流畅度。

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