Tengo un Popup.jsx y un Background.js . La ventana emergente crea una conexión de larga duración con mi trabajador de servicio en segundo plano.
Estoy manteniendo un estado en mi Popup.jsx , que se ve así
const [projectDetail, setProjectDetail] = useState({ projectCode: null }) El efecto de Popup.jsx useEffect ve así,
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() } }, []) Como puede ver, después de adjuntar el oyente para onMessage en la variable de port (que se define fuera del alcance del componente), envío un mensaje a Background.js para obtener detalles del proyecto. Background.js responde según el siguiente código:
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 }); }); Supongamos que tengo un botón de interacción con el usuario que le dice a Background.js que envíe un mensaje a Popup.jsx que coincide con el case ACTION.CHECK_STATE: , por lo que evidentemente espero que Popup.jsx en la consola el valor {projectCode: "Some value"} ya que el estado en el componente se ha actualizado (he verificado que lo hace usando ReactDevTools ).
Sin embargo, imprime { projectCode: null } , que era el valor de estado inicial.
Nota: la interacción del usuario no ocurre inmediatamente después de que se monta el componente, por lo que no es que esté tratando de obtener el valor del estado inmediatamente después de configurarlo.
No puedo obtener el valor de estado actualizado dentro de la función de devolución de llamada para addListener . No estoy seguro de qué estoy haciendo mal aquí.