React中按键触发useState更新值无效，寻求非定时器解决方案

为什么第一段代码无法生效？ #

你直接在组件函数体中添加全局键盘监听的方式存在两个核心问题：

• 组件每次渲染时都会执行if (!document.eventListenerAdded)逻辑，虽通过自定义属性避免重复添加监听，但handleKeyPress是组件每次渲染都会重新创建的新函数，组件后续重渲染后，监听的仍是第一次渲染时的旧函数，存在闭包陷阱，导致状态更新无法正确触发组件重渲染。
• 在React组件函数体中直接执行添加事件监听这类副作用，不符合React生命周期规范，这类操作必须放在useEffect钩子中处理，才能保证执行时机正确。

为什么定时器的代码能生效？ #

定时器回调在组件渲染完成后延迟执行，此时回调内的setMyHTML能访问到最新的状态更新函数，调用后会触发组件重渲染，因此能正常更新视图。但这种方式属于绕开React规范的临时方案，并非合理解决路径。

正确的替代方案 #

使用useEffect钩子管理全局键盘监听的添加与移除，结合useCallback缓存事件处理函数，避免不必要的监听重绑：

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

const List = ({ items }) => {
  const [myHTML, setMyHTML] = useState([]);

  // 用useCallback缓存处理函数，避免每次渲染都创建新函数
  const handleKeyPress = useCallback((e) => {
    if (e.key === "e" && window.location.pathname === '/PlayMode') {
      console.log('e pressed');
      setMyHTML([<div><h1>lol</h1></div>]);
    }
  }, []); // setMyHTML是React内置的稳定函数，无需加入依赖

  useEffect(() => {
    // 组件挂载时添加监听
    document.addEventListener("keyup", handleKeyPress);
    
    // 组件卸载或依赖变化时移除监听，防止内存泄漏
    return () => {
      document.removeEventListener("keyup", handleKeyPress);
    };
  }, [handleKeyPress]); // 依赖缓存后的处理函数，确保监听始终是最新的

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

补充说明 #

• useCallback缓存handleKeyPress函数，仅在依赖项变化时重新创建，避免useEffect因函数引用变化频繁解绑/绑定监听。
• useEffect的清理函数会在组件卸载或依赖更新时执行，移除全局监听，杜绝内存泄漏风险。
• 该方案完全遵循React副作用处理规范，状态更新后能正确触发组件重渲染，无需依赖定时器。

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