React中useEffect绑定的事件监听器值滞后于State如何同步？

问题描述 #

将queryTerm作为useEffect的依赖项，在钩子内注册keydown事件监听器handleKeyPress，但触发事件时，监听器内的queryTerm总是比最新状态值滞后一步。

复现代码 #

import React, { useState, useEffect } from 'react'

const Test = () => {
  const [queryTerm, setQueryTerm] = useState('')

  const handleChange = (event) => {
    setQueryTerm(event.target.value)
  }

  useEffect(() => {
    console.log({ outside: queryTerm })

    const handleKeyPress = (event) => console.log({ inside: queryTerm })

    window.addEventListener('keydown', handleKeyPress)

    return () => window.removeEventListener('keydown', handleKeyPress)
    
  }, [queryTerm])

  return (
    <div className='App'>
      <input onChange={handleChange} />
    </div>
  )
}

export default Test

问题原因 #

React的状态更新是异步的，事件监听器在创建时会捕获当前渲染周期的queryTerm值。若在状态更新后立刻触发按键事件，新的监听器可能还未完成注册，此时触发的仍是旧监听器，导致读取到滞后的状态值。

解决方案 #

方法1：使用useRef保存最新状态值（推荐） #

useRef的.current属性是可变的，不会触发组件重新渲染，事件监听器可直接访问最新的状态值，无需频繁注册/移除监听器。

修改后的代码：

import React, { useState, useEffect, useRef } from 'react'

const Test = () => {
  const [queryTerm, setQueryTerm] = useState('')
  const queryRef = useRef(queryTerm)

  const handleChange = (event) => {
    const newValue = event.target.value
    setQueryTerm(newValue)
    queryRef.current = newValue // 同步更新ref的当前值
  }

  useEffect(() => {
    const handleKeyPress = (event) => {
      console.log({ inside: queryRef.current }) // 直接获取最新状态值
    }

    window.addEventListener('keydown', handleKeyPress)
    return () => window.removeEventListener('keydown', handleKeyPress)
  }, []) // 仅在组件挂载时注册一次监听器

  return (
    <div className='App'>
      <input onChange={handleChange} />
    </div>
  )
}

export default Test

方法2：确保监听器随状态更新同步替换 #

若坚持依赖queryTerm更新监听器，需注意状态更新的异步特性。当状态更新完成后，useEffect会自动移除旧监听器并注册新监听器，此时新监听器会捕获最新的queryTerm。但这种方式在状态更新后立刻触发按键时，仍可能出现滞后问题，不如方法1可靠。

来源标注 #

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