React自定义useFetchAll钩子输入值丢失最后一位字符问题求助

问题根源 #

React的useState状态更新是异步批量处理的，你在handleChange里调用setSearchItem(e.target.value)后，立刻使用searchItem时，拿到的还是更新前的旧值，这就导致最后一个字符无法被捕获。

修复方案 #

方案1：直接使用输入框的最新值

在handleChange里先把e.target.value存成变量，后续判断和过滤都用这个变量，而不是状态里的searchItem：

const handleChange = (e) => {
  const currentValue = e.target.value;
  setSearchItem(currentValue);

  if (currentValue === "") {
    setListToDisplay([]);
  } else {
    setListToDisplay(
      searchResult.filter((item) => {
        return item.name.toLowerCase().includes(currentValue.toLowerCase());
      })
    );
  }
  console.log(currentValue); // 现在能拿到最新输入的字符
};

方案2：用Effect监听状态变化

把过滤逻辑移到useEffect中，等searchItem状态真正更新后再执行：

const handleChange = (e) => {
  setSearchItem(e.target.value);
};

// 监听searchItem变化，更新展示列表
useEffect(() => {
  if (searchItem === "") {
    setListToDisplay([]);
  } else {
    setListToDisplay(
      searchResult.filter((item) => {
        return item.name.toLowerCase().includes(searchItem.toLowerCase());
      })
    );
  }
}, [searchItem, searchResult]); // 依赖searchItem和searchResult确保更新

额外优化建议 #

你当前的代码会在输入每个字符时都请求GitHub接口，这会造成大量无效请求。建议启用你注释掉的防抖逻辑，减少API调用频率：

const debouncedSearch = useDebounce(searchItem, 300);

useEffect(() => {
  const searchRepo = async () => {
    setLoading(true);
    const { data } = await axios.get("https://api.github.com/repositories");
    setSearchResult(data);
    setLoading(false);
  };

  // 只有防抖后的搜索词有值时才请求
  if (debouncedSearch) searchRepo();
}, [debouncedSearch]);

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