为何将事件监听触发键设为props值时无响应？

你的代码出现这个问题主要有两个原因：

• useEffect依赖数组为空，导致事件监听未更新：当useEffect的依赖数组是[]时，它只会在组件首次渲染时执行一次。绑定的triggerFunc里引用的props.key是初始渲染时的旧值，之后即便props.key更新，旧的triggerFunc依然会被调用，判断条件自然不匹配。
• 误用React保留属性key：key是React专门用于列表渲染优化的保留属性，用它作为自定义props可能引发潜在冲突，建议更换为其他名称（比如triggerKey）。

修改后的代码示例 #

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

const YourComponent = ({ triggerKey, clickFunc }) => {
  // 用useCallback包裹函数，仅当依赖项变化时重新生成函数实例
  const triggerFunc = useCallback((e) => {
    if (e.key === triggerKey) {
      clickFunc();
    }
  }, [triggerKey, clickFunc]);

  useEffect(() => {
    document.addEventListener('keydown', triggerFunc);
    // 组件卸载或依赖变化时移除监听
    return () => {
      document.removeEventListener('keydown', triggerFunc);
    };
  }, [triggerFunc]); // 依赖triggerFunc，确保函数更新时重新绑定监听

  return <div>你的组件内容</div>;
};

export default YourComponent;

关键修改说明 #

1. 使用useCallback缓存事件处理函数：确保只有当triggerKey或clickFunc变化时，才会创建新的triggerFunc实例，保证判断逻辑始终使用最新的props值。
2. 更新useEffect的依赖数组：将triggerFunc加入依赖，这样每次函数更新时，都会先移除旧的事件监听，再绑定新的监听，避免旧逻辑残留。
3. 替换保留属性名称：把自定义props从key改为triggerKey，规避React内置属性的命名冲突。

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