为什么我得到两个控制台日志，而它应该只有一个？反应 js

Question

我在 React 中有一个简单的部分，其中包含两个按钮徽标和横幅，单击时我从 Web 组件打开一个简单的模式，现在我希望当用户单击取消时在控制台上显示一些内容。

问题：当我单击打开模式的徽标按钮并单击取消时，我得到了我想要的控制台日志，然后单击横幅按钮并打开模式并单击取消，而不是仅提供日志与横幅按钮相关，我得到了两个日志。

我的代码现场演示：live demo

import * as element from "./custom-element";

const Images = () => {
  const [imgName, setImgName] = useState();
  const [logo, setLogo] = useState();
  const [banner, setBanner] = useState();
  const elementRef = useRef(null);

  const handleUseImage = () => {
    switch (imgName) {
      case "logo":
        console.log("logo name", imgName);
        break;
      case "banner":
        console.log("banner name", imgName);
        break;
      default:
    }
  };

  useEffect(() => {
    if (imgName) {
      elementRef.current.addEventListener("cancel", function (e) {
        handleUseImage(e);
      });
    }
  }, [imgName]);

  const handleLogo = () => {
    setImgName("logo");
    openModal();
  };
  const handleBanner = () => {
    setImgName("banner");
    openModal();
  };
  const openModal = () => {
    elementRef.current.visible = true;
  };
  return (
    <div className="App">
      <custom-element ref={elementRef}></custom-element>
      <button onClick={handleLogo}>Logo </button>
      <button onClick={handleBanner}>Banner </button>
      <span>Logo url: {logo} </span>
      <span>banner url: {banner} </span>
    </div>
  );
};

export default Images;

[][2

为什么我得到两个日志？

Answer 1

我可能是错的，但我很确定问题是你永远不会删除事件侦听器，所以当你调用 setImgName 时它会重新呈现，现在你将拥有两个事件侦听器，一个“超出范围”（因为缺少更好的术语 - 它没有“当前”状态值，因为它来自以前的渲染）。我会尝试

useEffect(() => {
  if (imgName) {
    elementRef.current.addEventListener("cancel", handleUseImage);
    return () => {
        elementRef.current.removeEventListener("cancel", handleUseImage);
    }
  }
}, [imgName]);

为什么我得到两个控制台日志，而它应该只有一个？反应 js

Why do I get two console logs while its should be just one ? react js

html

javascript

web-component

reactjs

react-hooks