React 中的 Chrome 擴展事件處理程序

Question

我目前正在嘗試構建 Chrome 擴展程序。 為此，我使用了一個反應應用程序。 所有的渲染和東西都在工作。 問題是 chrome 事件處理程序。

在我的反應應用程序中，我有一個上下文。

在這個上下文中是一個useEffect鈎子，我在其中注冊事件：

useEffect(() => {
  chrome.tabs.onUpdated.addListener(myListener)
}, []);

監聽器 function 在上下文中使用來自useState的變量，因此每次這些變量更改時我都必須更新監聽器。

當然還有removeEventListener function，但是當我調用它時，它什么也沒做，因為 function 已經改變了，因此 Chrome 認為沒有注冊這樣的監聽器。

有誰知道如何刪除舊聽眾或清除所有聽眾？

Answer 1

解決方案代碼片段：

const handlerRef = useRef();
useEffect(() => {
    if(handlerRef.current){
        chrome.yourField.yourUpdate.removeListener(handlerRef.current);
    }
    chrome.yourField.yourUpdate.addListener(handler);
}, [yourDependencies]);
useEffect(() => {
     handlerRef.current = handler;
});

感謝@wOxxOm！