在多次触发的 chrome 扩展中更新反应钩子？

如何解决在多次触发的 chrome 扩展中更新反应钩子？

我在 chrome 扩展中使用 react 钩子，但是当我更新状态时，它被多次触发，当我只是控制台日志时它不会发生......

// browser.js
chrome.browserAction.onClicked.addListener(tab => {
    chrome.tabs.sendMessage(tab.id,{
        type: "toggle-popup"
    },null);
});


// content.js
const [popup,setPopup] = useState(false);
    let number = 1
    const togglePopup = () => setPopup(!popup);
    chrome.runtime.onMessage.addListener((request,sender,sendResponse) => {
        if (request.type == "toggle-popup") {
            number++
            togglePopup()
            console.log(number)
            console.log(popup)
        }
})

它给了我这些结果...

//1st click on tab icon
2
false

//2nd click on tab icon
3
false
2
true

//3rd click
4
false
3
true
2
true
2
false

我只希望它在单击时切换真/假以显示/隐藏页面上的 div（我不想使用 popup.js）。知道我做错了什么吗？

解决方法

函数组件的主体是 render 函数，您的代码在每次渲染时添加一个侦听器

// Runs on every render
chrome.runtime.onMessage.addListener((request,sender,sendResponse) => { setState(...) });

因此，您需要使用 React API 来处理这些情况并消除您也遇到的关闭问题。

为此使用 useEffect 和 useRef 而不是局部变量。

const Content = () => {
  const [popup,setPopup] = useState(false);
  const numberRef = useRef(0);

  useEffect(() => {
    chrome.runtime.onMessage.addListener((request,sendResponse) => {
      const togglePopup = () => setPopup((prev) => !prev);
      if (request.type == "toggle-popup") {
        numberRef.current++;
        togglePopup();
      }
    });
  },[]);
};

...