Tengo un botón, y cuando hago clic en él, debería hacer lo siguiente en orden:
Este es mi fragmento de código que existe:
<button onClick={() => { refreshPage(); setPaneIsOpen(true); }}>Click me</button> const refreshPage = () => { window.location.reload(); }setPaneIsOpen es un estado que, cuando se establece en verdadero, abrirá el panel lateral. Primero quiero actualizar específicamente la página y luego configurar el Panel.
He probado este enfoque de promesa async/await:
function refreshPagePromise() { return new Promise<void>((resolve) => { window.location.reload(); resolve(); }); } async function refreshAndOpen() { await refreshPagePromise(); setIsPaneOpen(true); } <button onClick={() => { refreshAndOpen(); }}>Click me</button>Pero parece que no puedo manejar la recarga de la página. Traté de crear un Code Sandbox, pero como esto es muy complejo, no pude. Intentaré agregar uno en las ediciones si pude reproducir.
Una forma ingeniosa sería usar localStorage.
agregue este useEffect que se ejecuta en la carga de la página:
useEffect(() => { const shouldOpenPane = !!localStorage.getItem("setPaneOpen") if(shouldOpenPane){ setIsPaneOpen(true); // Maybe the row beneath should not be there, // Idk what behaviour u want if user reloads page manually localStorage.removeItem("setPaneOpen") } }, []);Actualiza tu botón así:
<button onClick={() => { localStorage.setItem("setPaneOpen", "true"); // can be set to any thruthy value refreshPage(); }} > Click me </button>