Tengo una pregunta cuando desarrollo extensiones de cromo usando React, este es el controlador de registro en background.js y BackgroundConsole no es un error, loggerList es asíncrono

 interface ILog { date: string; level: 'debug' | 'info' | 'warn' | 'error'; msg: string; } static loggerList: string= [] static async loggerLists(log: ILog[]) { this.setLogList().then(async (res) => { await res console.log(res); chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.type === 'log') { sendResponse({ log: res }) } return true }) }) }; static async setLogList() { return new Promise((resolve, reject) => { resolve(this.loggerList) }) }

este es el popup.js cuando uso argumentos de recepción de devolución de llamada

 const [logList, setlogList] = useState([]) chrome.runtime.sendMessage({ type: 'log' }, res => { setlogList(res.log) console.log(res, res.log, '1111111111111'); //PopupConsole is endless loop to console.log(res, res.log, '1111111111111') })

este es el nuevo código con pupup.js

 const [logList, setlogList] = useState([]) useEffect(() => chrome.runtime.sendMessage({ type: "log" }, res => { console.log(res); setlogList(res.log) }), []) <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}> { logList.map((val: any) => { { JSON.stringify(val) } // return ( <> <p>{val.date}</p> <p>{val.level}</p> <p>{val.msg}</p> <p>{val}</p> </> // ) }) } </Modal>

esta es la pagina de muestra