React中调用setSearchText后searchText为旧值不重渲染怎么解决？

问题原因 #

1. 你在setSearchText执行后立即打印searchText拿到旧值是React的正常设计：React的状态更新是异步批量执行的，当前函数作用域内的状态变量捕获的是本次渲染的固定值，状态更新后要等到下一次渲染才能拿到最新值。
2. 组件未触发重渲染大概率是两个原因：
   • 你没有将搜索输入框的value属性绑定到searchText，导致视觉上看起来没有更新
   • 你在状态更新前就执行了loadShopsCount，逻辑执行时机错误

解决方案 #

步骤1：简化状态更新写法 #

不需要用函数式更新的场景直接传值即可，你的场景下新状态不依赖旧状态，直接修改searchClearHandler：

const searchClearHandler = () => {
  setSearchText("")
}

步骤2：用useEffect监听状态变化执行后续逻辑 #

如果你需要在searchText清空后执行查询、打印等操作，把逻辑放到useEffect中监听searchText变化：

import { useEffect } from 'react'

// 组件内添加这段逻辑
useEffect(() => {
  // 此处拿到的永远是最新的searchText值
  console.log('onClear-----------search is:::', searchText)
  // 清空后触发店铺计数查询
  if (searchText === '') {
    loadShopsCount()
  }
}, [searchText, loadShopsCount])

步骤3：检查输入框绑定 #

确保你的搜索输入框正确绑定了value属性，否则状态变化不会同步到UI上：

<input 
  type="text"
  value={searchText}
  onChange={(e) => searchHandler(e.target.value)}
  placeholder="输入搜索内容"
/>

可选：验证重渲染 #

如果还是怀疑组件没有重渲染，可以在组件顶层加一行打印验证，每次组件渲染都会输出：

const [searchText, setSearchText] = useState('')
console.log('组件触发渲染，searchText值为：', searchText)

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