为什么我的 createdElement 在 reactjs useEffect() 中翻倍？

Question

所以我这里的问题很简单，但你不必只了解 useEffect() 部分就可以了解其他代码..

当我试图悬停 text

时，我的自定义鼠标光标文本加倍

这是代码行。

    const cursorIntro = document.querySelector(".cursor");
    const options = document.querySelector(".introduction .nav-options");

    options.addEventListener("mousemove", function s(e) {
      var rect = options.getBoundingClientRect();
      var x = e.clientX - rect.left; //x position within the element.
      var y = e.clientY - rect.top;
      cursorIntro.style.left = x + "px";
      cursorIntro.style.top = y + "px";
    });
    function OnSelect() {
      const optionsSelection = document.querySelectorAll(".options");
      optionsSelection.forEach((elem, i) => {
        // console.log(elem.children[1].children[0].children[0])
        elem.children[1].children[0].children[0].addEventListener(
          "mouseleave",
          () => {
            cursorIntro.removeChild(cursorIntro.lastChild);
            // cursorIntro.innerHTML = ""
          }
        );

        elem.children[1].children[0].children[0].addEventListener(
          "mouseenter",
          () => {
            // elem.children[1].children[0].children[0].classList.add('')
            const createElement = document.createElement("h4");
            createElement.innerText =
              elem.children[1].children[0].children[0].dataset.name;
            cursorIntro.appendChild(createElement);
          }
        );
      });
    }

    OnSelect();

如您所见，我上面有一个自定义鼠标光标，因为当它悬停在 text 元素上时，我想在该位置附加文本。

当我调用它时，它在 useEffect() 内部...但我不确定的是我只在每个 addEventListener 回调一次。

我使用 createElement 的原因是因为如果我使用 innerHTML 而不使用 createElement 我不能再添加一些项目因为我的计划是在 mousecursor 中添加更多的东西

这是 CODEPEN

Answer 1

转到 index.js 并将 StrictMode 替换为 React.Fragment，在开发模式下反应 re-renders 两次

为什么我的 createdElement 在 reactjs useEffect() 中翻倍？

Why my createdElement is doubling in reactjs useEffect()?

javascript

cursor

addeventlistener

reactjs

use-effect