在 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
}

具体是什么原因我不能说。 但是，在我看来，这是范围界定问题。