React中点击搜索建议后搜索状态未更新问题求助

核心问题 #

1. setSearch 是异步更新状态的，调用它之后立刻读取 search 变量，拿到的还是更新前的旧值，所以跳转时传给 /search 的仍是原来的关键词。
2. window.location.reload() 完全多余，它会直接刷新整个页面，既浪费性能，还会清空React状态，完全抵消了React Router的单页跳转优势。

修复步骤 #

• 直接用传入的 searchTerm 作为跳转的状态值，不要依赖还没更新的 search 变量
• 删掉 window.location.reload() 这行代码
• 保留 setSearch(searchTerm) 可以让输入框同步显示选中的建议内容，不影响跳转逻辑

修改后的代码 #

const handleSearch = (searchTerm) => {
  console.log(searchTerm)
  setSearch(searchTerm)
  // 直接使用传入的searchTerm，而非未更新的search变量
  navigate('/search', { state: { search: searchTerm, items } });
}

return (
  <>
    <input 
      type="text"
      value={search}
      placeholder='Search'
      onChange={(e) => setSearch(e.target.value)}
      onKeyDown={handleSearchEnter}
    />

    <div className="dropdown">
      {items
        .filter((item) => {
          const searchTerm = search.toLowerCase();
          const fullName = item.name.toLowerCase();
          return searchTerm && fullName.startsWith(searchTerm) && item.name !== searchTerm
        })
        .map((item) => (
          <div
            key={item.id}
            onClick={() => handleSearch(item.name)}
            className='dropdown-row'
          >{item.name}</div>
        ))
      }
    </div>
  </>
)

补充提示 #

如果你的 handleSearchEnter 函数也存在类似问题（比如按回车时用的是旧的搜索值），也要做同样处理：直接取输入框的当前值（e.target.value），或者用 useRef 存储输入框的实时内容来避免异步状态的问题。

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