Javascript OnKeyDown侦听器为每个键关闭调用6次

我已经在组件的文档中添加了一个

onKeyDown

事件侦听器。它可以工作，但每次按键按下事件都会调用6-7次。这一点非常基本，我所做的只是将事件记录在控制台上，所以不确定到底是哪里出错了

这是我的组件：

import React, { useEffect } from "react";

const ActionButtons = ({ shuffleClick, keepClick }) => {
  const handleKeyDown = e => {
    console.log(e);
    console.log("this function was called")
  };

  componentDidMount(){

  }

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
  });

  return (
    <div className="flex-group-spaced-around small-margin-top">
      <div className="shuffler__button clickable" onClick={shuffleClick}>
        <p>Shuffle</p>
      </div>

      <div className="shuffler__button clickable" onClick={keepClick}>
        <p>Keep</p>
      </div>
    </div>
  );
};

export default ActionButtons;

import React，{useffect}来自“React”；
常量操作按钮=（{shuffleClick，keepClick}）=>{
常量handleKeyDown=e=>{
控制台日志（e）；
log（“调用了此函数”）
};
componentDidMount（）{
}
useffect（（）=>{
文件。添加了监听器（“键控”，handleKeyDown）；
});
返回(
洗牌

保持

);
};
导出默认操作按钮；

首先，如果您使用React钩子，您的“componentDidMount（）”不应该出现在这里。对于您的问题，“useEffect”正在转换“componentDidMount（）”和“componentDidUpdate（）”。所以，可能是因为您没有完成函数，而“componentDidUpdate（）”继续

试试这个：

useffect（（）=>{
文件。添加了监听器（“键控”，handleKeyDown）；
}, []);

首先，如果您使用React钩子，您的“componentDidMount（）”不应该出现在这里。对于您的问题，“useEffect”正在转换“componentDidMount（）”和“componentDidUpdate（）”。所以，可能是因为您没有完成函数，而“componentDidUpdate（）”继续

试试这个：

useffect（（）=>{
文件。添加了监听器（“键控”，handleKeyDown）；
}, []);

您的

操作按钮

组件可能在您的文档中安装了多次。这意味着，对于每个

ActionButton

实例，都会在文档上注册一个事件侦听器

---

重写事件处理程序以确保侦听单个全局事件。

您的

ActionButton

组件可能已在文档中多次装入。这意味着，对于每个

ActionButton

实例，都会在文档上注册一个事件侦听器

---

重写事件处理程序以确保单个全局事件被监听。

页面上安装了多少次

ActionButtons

组件？如果是预期的行为，您可能需要按键。@EmielZuurbier您已经为我指出了正确的方向。我添加了一个清理功能，现在它工作得很好。如果你想补充这一点作为答案，我很乐意接受。@Keith据我所知，

keypress

不受欢迎页面上安装了多少次

ActionButtons

组件？这是预期的行为，你可能需要keypress来代替。@EmielZuurbier你给我指出了正确的方向。我添加了一个清理功能，现在它工作得很好。如果你想加上这个作为答案，我很乐意接受。@Keith据我所知，

keypress

不推荐使用