javascript 为什么我的事件在useEffect中运行多次?

up9lanfz  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(151)

我不明白为什么useEffect中的handler运行多次,我知道我的useEffect第一次运行,但我不明白为什么 *useEffect中的handler运行多次

useEffect(() => {
    
    const keys = [];
    const handler = (e) => {
      
      keys.push(e.keyCode);

      const getItemsFiltered = keys
        .slice(0)
        .slice(Math.max(keys.length - 3, 0))
        .join("");

      if (getItemsFiltered == 1716113) {
        setShow(true);
      }
      console.log(getItemsFiltered);
      if (getItemsFiltered == 1716114) {
        document.getElementById("textField").focus();
      }
    };

    document.addEventListener("keydown", handler, false);
    return () => document.removeEventListener("keydown", handler, false);
  }, []);
ldioqlga

ldioqlga1#

无论你点击页面的哪个位置,你的处理函数都会对每一次按键做出React!你可以点击组件之外的部分,但是你的处理函数仍然会运行,因为你把你的处理函数作为一个事件监听器附加到了整个HTML页面上。
如果只想在单击组件时运行handler函数,可以执行以下操作:

document.getElementById("your-div-id").addEventListener("keydown", handler, false);

您也可以使用React的useRef钩子来实现相同的效果。

相关问题