如何在組件卸載反應 js 上刪除事件偵聽器？

Question

我在 handleSlide function 中每 2 秒進行一次控制台記錄，我希望它在每次安裝組件時運行。

    const handleSlide = () => {
        setInterval(() => {
            console.log('runs');
        }, 2000);
    };

    useEffect(() => {
        window.addEventListener('load', handleSlide);
        return () => {
            return window.removeEventListener('load', handleSlide);
        };
    }, []);

問題是 handleSlide function 在卸載后仍然運行，我也在其他頁面和組件上看到控制台日志。

當組件卸載時，如何刪除 reactjs 中的事件偵聽器？

Answer 1

我在 handleSlide function 中每 2 秒記錄一次控制台，我希望它在每次安裝組件時運行。

    const handleSlide = () => {
        setInterval(() => {
            console.log('runs');
        }, 2000);
    };

    useEffect(() => {
        window.addEventListener('load', handleSlide);
        return () => {
            return window.removeEventListener('load', handleSlide);
        };
    }, []);

問題是handleSlide function 在卸載后仍然運行，我在其他頁面和組件上也看到了控制台日志。

卸載組件時，如何在 React js 中刪除事件偵聽器？

Answer 2

您正在使用 setInterval 並且它在安裝時每 2 秒運行一次。 您需要回調 function 才能在特定條件下清除它。 您的間隔每 2 秒運行一次。

Answer 3

您並沒有真正刪除間隔。 您的handleSlide function 注冊了一個匿名的setInterval 。 您可以通過調用clearInterval來清除它。 但是，您需要為setInterval方便返回的 ID 傳遞一個 ID。

您的代碼可能如下所示

yourID = setInterval(() => {
            console.log('runs');
        }, 2000);

然后在你的回調中

clearInterval(yourID)