React中useEffect空依赖时为何无法获取动态变量最新值？

问题原因 #

没错，这就是useEffect的闭包特性导致的。你的useEffect依赖数组是空的，组件挂载时只会执行一次这个effect，此时Socket.IO的事件回调会捕获当时的username状态值（也就是初始的空字符串）。后续通过setUsername更新username时，组件会重新渲染，但这个effect不会再次执行，所以回调里的username永远是第一次渲染时的初始值。

解决方案 #

方案1：将username加入useEffect依赖数组

每次username变化时，先移除旧的事件监听，再绑定新的回调，确保回调能捕获到最新的username值：

const [username, setUsername] = useState<string>('')

useEffect(() => {
  const handleLogin = (socketId: string) => {
    dispatch(authActions.setUsername(username))
    navigate(ROUTER_PATHS.activeUsers)
  }

  server.on("CORRECT_USERNAME_TO_LOGIN", handleLogin)
  // 组件卸载或依赖变化时移除监听
  return () => {
    server.off("CORRECT_USERNAME_TO_LOGIN", handleLogin)
  }
}, [username, dispatch, navigate])

注意要把dispatch和navigate也加入依赖数组，避免因依赖缺失导致的意外问题。

方案2：使用useRef跟踪最新的username值

如果不想频繁解绑/绑定事件监听，可以用useRef来同步最新的username状态，这样回调只需要绑定一次：

const [username, setUsername] = useState<string>('')
const usernameRef = useRef<string>(username)

// 同步state到ref
useEffect(() => {
  usernameRef.current = username
}, [username])

useEffect(() => {
  const handleLogin = (socketId: string) => {
    // 通过ref.current获取最新的username值
    dispatch(authActions.setUsername(usernameRef.current))
    navigate(ROUTER_PATHS.activeUsers)
  }

  server.on("CORRECT_USERNAME_TO_LOGIN", handleLogin)
  return () => {
    server.off("CORRECT_USERNAME_TO_LOGIN", handleLogin)
  }
}, [dispatch, navigate])

总结 #

本质是React的闭包特性导致旧的回调捕获了旧的状态值。两种方案各有适用场景：如果username变化不频繁，方案1实现更简单；如果希望减少监听的解绑/绑定操作，方案2更高效。

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