搜索建议列表点击后无法正确填入输入框怎么办？

兰兰 Dev 提问于 2026-03-21 05:49:17 阅读 22

交互

我在做搜索框的自动建议功能，用的是监听 input 事件 + 调接口返回关键词列表。现在问题是，点击建议项时，输入框的值虽然能通过 inputRef.current.value = item 设置，但 React 的状态没同步，导致后续提交还是旧值。

我试过在点击回调里同时调用 setValue(item)，但有时候会触发额外的搜索请求，造成闪烁。有没有更稳妥的做法？这是我的关键代码：

const handleSuggestionClick = (suggestion) => {
  inputRef.current.value = suggestion;
  setValue(suggestion); // 这里会再次触发 useEffect 里的搜索
};

useEffect(() => {
  if (value.trim()) {
    fetchSuggestions(value);
  }
}, [value]);

搜索交互搜索建议

我来解答赞 13 收藏

反馈

1 条解答

Mr.巧梅 Lv1

把 setValue 放 inputRef.current.value = suggestion 前面，然后加个标志位控制搜索请求。就这样。

const handleSuggestionClick = (suggestion) => {

  setValue(suggestion);

  inputRef.current.value = suggestion;

  shouldFetch.current = false;

};



useEffect(() => {

  if (value.trim() && shouldFetch.current) {

    fetchSuggestions(value);

  }

  shouldFetch.current = true;

}, [value]);

2026-03-21 06:01