首頁猿問如何從正在卸載的背景中刪除事件偵聽器？

如何從正在卸載的背景中刪除事件偵聽器？

JavaScript

倚天杖 2021-10-21 10:53:46

我有一個Backdrop_DIV基于open下拉組件的a 呈現的。{open && <LS.Backdrop_DIV onClick={handleBackdropClick} ref={backdrop_ref} > Backdrop </LS.Backdrop_DIV>}Backdrop_DIV如果用戶滾動 ( touchmove)，我希望它消失。Obs：這是一個移動視圖。const handleTouchMove = useCallback(()=>{ setOpen(false); },[]);useEffect(() => { if (open) { // ATTACHING THE EVENT LISTENR backdrop_ref.current.addEventListener('touchmove', handleTouchMove ); } // ATTEMPT TO REMOVE THE EVENT LISTENER return () => backdrop_ref.current.removeEventListener('touchmove', handleTouchMove);},[open,handleScroll]);它有效，但如果在我嘗試清除我的useEffect. 有沒有辦法做到這一點？錯誤：react-dom.development.js:20313 未捕獲的類型錯誤：無法讀取 null 的屬性“removeEventListener”這個錯誤很明顯，因為Backdrop_DIV它在運行時不再掛載。題在這種情況下，我需要費心刪除事件偵聽器嗎？我能做什么？

查看完整描述

1 回答

皈依舞

TA貢獻1851條經驗獲得超3個贊

根據 Carlene 在評論中推薦的問題，我會說沒有必要刪除事件偵聽器，因為它將由垃圾收集器處理，盡管在這種情況下某些較舊的瀏覽器可能會泄漏內存。

而且，我找到了一種在卸載之前刪除偵聽器的方法Backdrop_DIV，它可以工作：

我添加了lastOpenState_ref useRef()對先前渲染open狀態的跟蹤，以便我可以檢測將卸載Backdrop_DIV( open === false)的渲染，并在該渲染期間移除偵聽器。

import React, {useState, useEffect, useRef, useCallback} from 'react';

function MyComponent() {

const [open,setOpen] = useState(false);

const backdrop_ref = useRef(null);

const lastOpenState_ref = useRef(false);

const handleBackdropTouchMove = useCallback(() => {

setOpen(false);

},[]);

// BLOCK TO REMOVE EVENT LISTENER FROM backdrop_ref

// SINCE IT'S IMPOSSIBLE TO REMOVE FROM THE useEffect RETURN

// BECAUSE THE backdrop_ref IS NULL WHEN IT RUNS

if (lastOpenState_ref.current === true && open === false) {

backdrop_ref.current.removeEventListener('touchmove', handleBackdropTouchMove);

}

lastOpenState_ref.current = open;

// EFFECT TO ATTACH 'touchmove' EVENT LISTENER ON 'backdrop_ref.current'

useEffect(() => {

if (open) {

backdrop_ref.current.addEventListener('touchmove', handleBackdropTouchMove);

}

},[open,handleBackdropTouchMove]);

// RETURN STATEMENT

return(

<LS.Container_DIV>

{open &&

<LS.Backdrop_DIV

onClick={handleBackdropClick}

ref={backdrop_ref}

</LS.Backdrop_DIV>

}

</LS.Container_DIV>

);

}

反對回復 2021-10-21

1 回答
0 關注
188 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何從正在卸載的背景中刪除事件偵聽器？

如何從正在卸載的背景中刪除事件偵聽器？

1 回答

添加回答

如何從正在卸載的背景中刪除事件偵聽器？

如何從正在卸載的背景中刪除事件偵聽器？