Tengo un componente React, que tiene un botón y cuando se hace clic se abre un panel lateral. Primero me gustaría actualizar la página, esperar hasta que se actualice por completo y luego abrir el panel lateral. Aquí está mi código actual:
const refreshPage = () => { window.location.reload(); } <button onClick={() => { refreshPage(); // Refreshing here and then opening the sidePane setIsPaneOpen(true); }} className="btn-default">Click me</button>He intentado dormir y esperar, pero depende de todos los factores, ¿no? por lo que no se puede confiar.
Si se actualiza la página, todo lo que estaba almacenado en la memoria (todas sus variables, estados de los componentes, etc.) se pierde. Debe usar localStorage para saber si la barra lateral debe abrirse cuando se carga la página y se monta el componente:
useEffect(() => { // This runs when the component is mounted (after the page loads). if (localStaorage.getItem('openSidebarOnLoad') === 'true') { setIsPaneOpen(true); localStorage.removeItem('openSidebarOnLoad'); } }, []); const handleButtonClick = () => { localStorage.setItem('openSidebarOnLoad', true); window.location.reload(); }; <button onClick={ handleButtonClick } className="btn-default">Click me</button>