时间戳

首页 > 解决方案 > React 中的 Chrome 扩展事件处理程序

reactjs - React 中的 Chrome 扩展事件处理程序

问题描述

我目前正在尝试构建 Chrome 扩展程序。为此，我使用了一个反应应用程序。所有的渲染和东西都在工作。问题是 chrome 事件处理程序。

在我的反应应用程序中，我有一个上下文。

在这个上下文中是一个useEffect钩子，我在其中注册事件：

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

侦听器函数使用useState上下文中的变量，因此每次这些变量更改时我都必须更新侦听器。

当然有removeEventListener函数，但是当我调用它时，它什么也没做，因为函数已经改变了，因此Chrome认为没有注册这样的监听器。

有谁知道如何删除旧听众或清除所有听众？

标签： reactjsgoogle-chromegoogle-chrome-extensionevent-handlingdom-events

解决方案

解决方案代码片段：

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

感谢@wOxxOm！

推荐阅读