React函数组件更新字符串类型state出现滞后问题该如何解决？

问题根源 #

React状态更新为异步批处理机制，调用setsearchDetails后，当前作用域内的searchDetails不会立刻变更为最新值，你后续打印、传入dispatch的都是更新前的上一轮状态，因此会出现输入值和state差一位的现象。

修复方案 #

有两种可选修复方式，根据业务场景选择即可：

方案1：直接使用事件返回的最新输入值 #

不需要依赖刚更新的state，直接用e.target.value执行后续逻辑，性能最好：

const [searchDetails, setsearchDetails] = useState('')
const onChangeSearch = (e) => {
  e.preventDefault()
  // 先把最新值取出来复用
  const inputVal = e.target.value
  setsearchDetails(inputVal)
  console.log(inputVal)
  dispatch(onSearchById(inputVal))
  if (inputVal.length === 0) {
    dispatch(onSearchById(''))
  }
}

<InputBase inputProps={{ 'aria-label': 'search users' }} onChange={onChangeSearch} />

方案2：通过useEffect监听state变化执行后续逻辑 #

如果后续业务逻辑必须依赖state更新完成后的状态，可以把逻辑放到useEffect中，监听searchDetails的变更触发执行：

const [searchDetails, setsearchDetails] = useState('')

// state更新完成后自动触发执行
useEffect(() => {
  console.log(searchDetails)
  dispatch(onSearchById(searchDetails))
}, [searchDetails, dispatch])

const onChangeSearch = (e) => {
  e.preventDefault()
  setsearchDetails(e.target.value)
}

<InputBase inputProps={{ 'aria-label': 'search users' }} onChange={onChangeSearch} />

注意：dispatch是React内置的稳定引用，放到依赖数组中不会引发多余的重复执行。

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