在 React Base chrome 擴展中使用長壽命連接時無法獲取狀態值

Question

我有一個Popup.jsx和一個Background.js 。 彈出窗口創建了與我的后台服務人員的長期連接。

我在我的Popup.jsx中保持一個狀態，看起來像這樣

const [projectDetail, setProjectDetail] = useState({ projectCode: null })

我的useEffect的Popup.jsx看起來像這樣，

useEffect(() => {
    port = chrome.runtime.connect({ name: 'Background Connection' })
    port.onMessage.addListener(({ action, payload }) => {

      switch (action) {
        case ACTION.SET_PROJECT_DETAIL:
          setProjectDetail(payload);
          break;
  
        case ACTION.CHECK_STATE:
          console.log(projectDetail)
          break;
   
        
        default:
          break;
      }
  
    })
    port.postMessage({ action: ACTION.GET_PROJECT_DETAIL })
    return () => {
      port.disconnect()
    }
  }, [])

如您所見，在port變量（定義在組件范圍之外）上附加onMessage的偵聽器后，我向Background.js發送消息以獲取項目詳細信息。 Background.js根據以下代碼進行響應：

chrome.runtime.onConnect.addListener(function (port) {
  // console.log("🚀 ~ file: index.js ~ line 182 ~ chrome.runtime.onConnect.addListener ~ port", port)

  port.onMessage.addListener(function ({ action, payload }) {

    if (action === ACTION.GET_PROJECT_DETAIL) {
       port.postMessage({ action: ACTION.SET_PROJECT_DETAIL, payload: { projectCode: "Some value"} })
    }

   // ...Removed more code for brevity

  });
});

假設我有一個用戶交互按鈕，它告訴Background.js向與case ACTION.CHECK_STATE:匹配的Popup.jsx發送一條消息，所以顯然，我希望Popup.jsx控制台記錄值{projectCode: "Some value"}作為組件中的狀態已更新（我已經通過使用ReactDevTools驗證了它確實如此）。

但是，它會打印{ projectCode: null }這是初始狀態值。

注意：用戶交互不會在組件掛載后立即發生，所以並不是我在設置后立即嘗試獲取狀態值。

我無法在addListener的回調函數中獲取更新的狀態值。 不知道我在這里做錯了什么。

Answer 1

它不起作用的原因是port變量是在功能組件本身之外聲明的。

最初， Popup.jsx是這樣定義的，

//...import statements

let port = null;
const Popup = () => {
  port = chrome.runtime.connect({ name: 'Background Connection' });
  
  //...more code
}

后來我改成

//...import statements

const Popup = () => {
  let port = chrome.runtime.connect({ name: 'Background Connection' });
  
  //...more code
}

具體是什么原因我不能說。 但是，在我看來，這是范圍界定問題。