Слушатель OnKeyDown вызывается 6 раз при каждом нажатии клавиши

Question

Я добавил прослушиватель событий onKeyDown в документ моего компонента. Это работает, но вызывается 6-7 раз за каждое нажатие клавиши. Это очень просто c на данный момент, все, что я делаю, это консоль, в значительной степени регистрирующая событие, поэтому не уверен, что именно сделано неправильно.

Это мой компонент:

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 Hooks, ваш «componentDidMount ()» здесь не должен. И для вашей проблемы "useEffect" - это преобразование "componentDidMount ()" и "componentDidUpdate ()". Так что, возможно, это потому, что вы не завершаете sh свою функцию, а "componentDidUpdate ()" продолжает это.

Попробуйте это:

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