React中useState状态更新滞后一次输入操作的问题求解

React的状态更新是异步批处理机制，调用setValue后，当前函数作用域内的value不会立刻变更为最新输入值，仍然是上一次渲染留存的旧值。你在同一段同步逻辑里用旧value做筛选，传给setNewItems的结果从根源上就是滞后的，哪怕用useEffect监听newItems打印，拿到的也只是基于旧值算出的错误结果，自然表现为状态慢一拍。

方案1：直接使用事件对象的最新输入值做筛选（最直接） #

不要在调用setValue后依赖state里的value做计算，先把最新输入值存到局部变量，全流程用这个变量做逻辑处理：

const handleChange = (e) => {
  const results = []
  // 先取出最新输入值存为局部变量
  const currentInput = e.target.value
  setValue(currentInput)

  for (let item of items) {
    // 用最新值做匹配，不读取state里的旧value
    if (item.includes(currentInput)) {
      results.push(item)
    }
  }
  setNewItems(results)
}

useEffect(() => {
  console.log(newItems)
}, [newItems])

方案2：将筛选逻辑迁移到useEffect中，监听value变化执行 #

等value状态真正更新完成后，再触发筛选逻辑计算newItems：

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

// 监听value变化，value更新完成后再执行筛选
useEffect(() => {
  const results = items.filter(item => item.includes(value))
  setNewItems(results)
}, [value, items])

useEffect(() => {
  console.log(newItems)
}, [newItems])

方案3：移除冗余派生状态（推荐最优解） #

如果newItems完全是由value和原始items数组计算得出的派生值，完全不需要单独维护成state，直接在渲染阶段计算即可，从根源上避免状态不同步问题：

const [value, setValue] = useState('')
// 直接根据当前依赖计算匹配结果，无需额外setState
const newItems = items.filter(item => item.includes(value))

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

// 直接读取就是最新值，无需额外useEffect监听
console.log(newItems)

对应输入框组件保持原有写法即可：

<input
  onChange={handleChange}
  value={value}
/>

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