Chrome-React 中的扩展事件处理程序
Chrome-Extension eventHandler in React
我目前正在尝试构建 Chrome 扩展。为此,我使用了一个 React 应用程序。所有的渲染和东西都在工作。问题是 chrome 事件处理程序。
在我的 React 应用程序中,我有一个上下文。
在此上下文中有一个 useEffect
挂钩,我在其中注册事件:
useEffect(() => {
chrome.tabs.onUpdated.addListener(myListener)
}, []);
侦听器函数在上下文中使用来自 useState
的变量,因此每次这些变量发生变化时我都必须更新侦听器。
当然有removeEventListener
函数,但是当我调用它时,它什么也没做,因为函数已经改变了,因此Chrome认为没有注册这个监听器。
有谁知道如何删除旧的监听器或清除所有监听器?
解决方案代码片段:
const handlerRef = useRef();
useEffect(() => {
if(handlerRef.current){
chrome.yourField.yourUpdate.removeListener(handlerRef.current);
}
chrome.yourField.yourUpdate.addListener(handler);
}, [yourDependencies]);
useEffect(() => {
handlerRef.current = handler;
});
感谢@wOxxOm!
我目前正在尝试构建 Chrome 扩展。为此,我使用了一个 React 应用程序。所有的渲染和东西都在工作。问题是 chrome 事件处理程序。
在我的 React 应用程序中,我有一个上下文。
在此上下文中有一个 useEffect
挂钩,我在其中注册事件:
useEffect(() => {
chrome.tabs.onUpdated.addListener(myListener)
}, []);
侦听器函数在上下文中使用来自 useState
的变量,因此每次这些变量发生变化时我都必须更新侦听器。
当然有removeEventListener
函数,但是当我调用它时,它什么也没做,因为函数已经改变了,因此Chrome认为没有注册这个监听器。
有谁知道如何删除旧的监听器或清除所有监听器?
解决方案代码片段:
const handlerRef = useRef();
useEffect(() => {
if(handlerRef.current){
chrome.yourField.yourUpdate.removeListener(handlerRef.current);
}
chrome.yourField.yourUpdate.addListener(handler);
}, [yourDependencies]);
useEffect(() => {
handlerRef.current = handler;
});
感谢@wOxxOm!