每按一次键，OnKeyDown listener调用6次

Question

我已经在我的组件的文档中添加了一个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;

Answer 1

您的ActionButton组件可能在文档中被多次挂载。这意味着对于每个ActionButton实例，都会在文档上注册一个事件侦听器。

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

Answer 2

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

试试这个：

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