en el siguiente código, sigo recibiendo este error: "el almacenamiento local no está definido". Estoy bastante seguro de que esto sucede porque next.js está tratando de mostrar la página en el servidor. Traté de poner const [advancedMode, setAdvancedMode] = useState( localStorage.getItem("advancedMode") === "true" ? true : false ); dentro de useEffect pero no funciona. ¿Alguna idea?
import { useState, useEffect, useRef } from "react"; import Head from "next/head"; import ReactGA from "react-ga"; const Home = () => { const isMountedRef = useRef(null); const [display, setDisplay] = useState(""); const [error, setError] = useState(""); const [advancedMode, setAdvancedMode] = useState( localStorage.getItem("advancedMode") === "true" ? true : false ); const [searchTerm, setSearchTerm] = useState(""); // Some other code...También probé el código a continuación, pero luego aparece un error "AdvancedMode no está definido"
if (typeof window !== "undefined") { const [advancedMode, setAdvancedMode] = useState( localStorage.getItem("advancedMode") === "true" ? true : false ); } else { const [advancedMode, setAdvancedMode] = useState(false); }Antes de acceder al almacenamiento local, debe verificar si está en el servidor o en el cliente. Puede hacerlo marcando el tipo de objeto de ventana.
if (typeof window === "undefined") { // You are on server } else { // You are on client, and can access the localStorage }