搜索建议列表在输入空格时会闪现然后消失怎么办？

慧红提问于 2026-01-26 08:32:27 阅读 45

交互

我在做搜索框的自动建议功能时遇到个怪问题，当用户输入空格（比如搜索“苹果派”）时，建议列表会快速闪现一下就消失了。我用了防抖和实时请求，但没找到原因。

代码结构大概是这样写的：<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-javascript">
const SearchBar = () => {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const handleInput = useCallback(debounce(async (value) => {
    if (!value.trim()) return setSuggestions([]);
    const res = await searchAPI.getSuggestions(value);
    setSuggestions(res.data.items);
  }, 300));

  return (
    <input 
      value={query} 
      onChange={(e) => {
        setQuery(e.target.value);
        handleInput(e.target.value);
      }}
    />
    {suggestions.length > 0 && <ul>...</ul>}
  );
};
</code></code></pre>

测试时发现：输入“苹果”时列表正常显示，但继续输入空格变成“苹果 ”时，列表会先出现0.5秒然后突然消失。控制台没报错，API返回的数据也正常包含带空格的建议项…

我来解答赞 9 收藏

反馈

1 条解答

FSD-欣辰 Lv1

问题是这里 if (!value.trim()) return setSuggestions([]);，空格会被 trim 干掉，导致建议清空。改成 if (value === '') return setSuggestions([]); 就这样。

完整代码：



const handleInput = useCallback(debounce(async (value) => {

  if (value === '') return setSuggestions([]);

  const res = await searchAPI.getSuggestions(value);

  setSuggestions(res.data.items);

}, 300));

2026-01-29 22:07