[OnKeyDown侦听器，每次按下键都会调用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

首先，如果您使用React Hooks，则您的“ componentDidMount（）”不应在此处。对于您的问题，“ useEffect”正在转换“ componentDidMount（）”和“ componentDidUpdate（）”。因此，可能是因为您没有完成功能，而“ componentDidUpdate（）”继续了。

尝试一下：

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