Estoy usando Next JSs, tengo problemas para encontrar una solución sobre cómo actualizar la página cuando se gira
const app () => { useEffect(()=>{ window.addEventListener("orientationchange", function() { window.location.reload() });}) return(<>some code</>); }Te recomiendo encarecidamente que no hagas eso.
Pero hay un par de problemas con su implementación:
Para conectar un detector de eventos en el montaje del componente, necesita una matriz de dependencias vacía en su useEffect . De lo contrario, la devolución de llamada de su efecto se llama en cada representación que, en su caso, agregará múltiples controladores.
No está eliminando el controlador cuando el componente está desmontado. Debe devolver una devolución de llamada de limpieza desde la devolución de llamada useEffect .
El evento de cambio de orientationchange está en desuso y tiene poca compatibilidad con el navegador . En su lugar, escuche el change en Screen.orientation , que tiene una mejor compatibilidad con el navegador . Alternativamente, solo escuche resize , ya que un cambio en la orientación de la pantalla que le interese activará un evento de cambio de resize , y los dispositivos móviles se están volviendo cada vez más sofisticados con la forma en que se usa el espacio real de la pantalla (pantalla dividida, etc.). Es posible que no todos provoquen un cambio en la orientación, pero parece que le importa un cambio en el tamaño .
Por separado, la app no es un nombre de componente válido. Las funciones componentes deben comenzar con una letra mayúscula.
Arreglando todo eso:
const App () => { useEffect(()=>{ const handler = () => { // Handle the change in orientation here (I recommend **not** reloading) }; Screen.orientation.addEventListener("change", handler); // Or window resize return () => { // On unmount, remove the handler Screen.orientation.removeEventListener("change", handler); // Or window resize }; }, []); // ^^−−−− tells `useEffect` to only call your callback once, when the component // is first mounted. return (<>some code</>); }