React函数组件事件监听器无法获取最新State值的解决方法

问题原因 #

这是React函数组件的闭包陷阱导致的：

• 你的useEffect依赖项是空数组[]，意味着它只会在组件首次渲染时执行一次。此时调用handleKeyboardEvent，里面创建的handleKeyUp函数会捕获当时的currInputIndex值（初始的0）。
• 当initialCurrentSelect把currInputIndex更新为1时，组件会重新渲染，但useEffect不会再次执行，旧的handleKeyUp监听器依然绑定在window上，它内部的currInputIndex还是首次渲染时的0。

你尝试的传参方式无效，原因在于：

• 首次调用handleKeyUp(currInputIndex)时，currInputIndex是0，生成的是一个固定捕获0的函数；
• 移除监听器时，handleKeyUp(currInputIndex)又生成了一个全新的函数，和之前绑定的不是同一个，导致旧监听器无法被移除，新的也没生效。

解决方案一：让useEffect监听state变化，更新监听器 #

修改useEffect的依赖项，当currInputIndex变化时，重新绑定监听器（先移除旧的，再绑定新的）：

import { useState, useEffect } from 'react';
import './App.css';
import React from 'react';

const Chat: React.FC = (props) => {
  const [currInputIndex, setCurrInputIndex] = useState(0);

  useEffect(() => {
    initialCurrentSelect();
  }, []);

  // 单独处理键盘事件，监听currInputIndex变化
  useEffect(() => {
    const handleKeyUp = async (event: KeyboardEvent) => {
      if (event.key === 'ArrowUp') {
        const selected = currInputIndex - 1;
        console.log(selected);
      }
    };
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, [currInputIndex]); // 依赖currInputIndex，state更新时重新绑定监听器

  const initialCurrentSelect = async () => {
    setCurrInputIndex(1);
  };

  return (<div></div>);
}

export default Chat;

解决方案二：用useRef保存最新的state值 #

如果不想频繁绑定/移除监听器，可以用useRef实时同步最新的state——ref的.current属性是可变的，不受闭包限制：

import { useState, useEffect, useRef } from 'react';
import './App.css';
import React from 'react';

const Chat: React.FC = (props) => {
  const [currInputIndex, setCurrInputIndex] = useState(0);
  const inputIndexRef = useRef(currInputIndex);

  // 同步state到ref，确保ref始终持有最新值
  useEffect(() => {
    inputIndexRef.current = currInputIndex;
  }, [currInputIndex]);

  useEffect(() => {
    initialCurrentSelect();
    const handleKeyUp = async (event: KeyboardEvent) => {
      if (event.key === 'ArrowUp') {
        // 直接取ref的current值，永远是最新的state
        const selected = inputIndexRef.current - 1;
        console.log(selected);
      }
    };
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  const initialCurrentSelect = async () => {
    setCurrInputIndex(1);
  };

  return (<div></div>);
}

export default Chat;

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