如何使用useEffectHook只執行一次操作？-有解無憂

如果有人離開視窗，我想制作模式彈出視窗。

我嘗試了以下代碼：

React.useEffect(() => {
    const popupWhenLeave = (event) => {
      if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
      ) {
        handleClickOpen();
      }
    };
    document.addEventListener("mouseleave", popupWhenLeave);

    return () => {
      document.removeEventListener("mouseleave", popupWhenLeave);
    };
  }, []);

上面的代碼幫助了我，但因為它在每個時間間隔都會彈出，所以變得很煩人。我嘗試添加一個新狀態來只運行一次代碼：

const [cursorOut, setCursorOut] = useState(false);

React.useEffect(() => {
    const popupWhenLeave = (event) => {
      if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
      ) {
        handleClickOpen();
      }
    };
    if(!cursorOut) {
       document.addEventListener("mouseleave", popupWhenLeave);
       setCursorOut(true);
    }

    return () => {
      document.removeEventListener("mouseleave", popupWhenLeave);
    };
  }, []);

上面的代碼也和前面的代碼一樣運行，即每次彈出模式時。

我嘗試將依賴項添加到 useEffect[cursorOut]但現在它不會彈出模式。

當游標消失時，我只需要在頁面上彈出一次模態然后停止。

PS我也嘗試過不使用useEffect，但它不起作用。

uj5u.com熱心網友回復：

當依賴陣列為空時，您的useEffect函式只會被呼叫一次。但是，您的useEffect函式向頁面添加了一個事件偵聽器，每次事件發生時都會呼叫該事件偵聽器。

如果您只想偵聽一次事件，則應在popupWhenLeave函式中洗掉事件偵聽器，而不僅僅是在useEffect最后回傳的清理函式中。

  React.useEffect(() => {
    const popupWhenLeave = (event) => {
      if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
      ) {
        handleClickOpen();
        document.removeEventListener("mouseleave", popupWhenLeave);
      }
    };
    document.addEventListener("mouseleave", popupWhenLeave);

    return () => {
      document.removeEventListener("mouseleave", popupWhenLeave);
    };
  }, []);

旁注：如果您的組件因例如父組件更改而重新創建，則useEffect無論依賴陣列的內容如何，??都會再次呼叫該函式。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507645.html

標籤：javascript 反应反应钩子事件处理

上一篇：從父級觸發Angular表單的提交事件

下一篇：從谷歌地圖獲取緯度和經度