Este es un proyecto next/react. estructura de carpetas:
components > Navbar.js pages > index.js (/ route)(includes Navbar) > submitCollection.js (/submitCollection)(includes Navbar)Estoy tratando de que el usuario envíe una cadena específica como entrada y la almaceno dentro de la variable de cuenta. Navbar.js
const Navbar = ({}) => { const [account,setAccount] = useState() const handleClick = () => { setAccount(randomNumberThatIHaveGenerated) } ... return ( <Link href="/">home</Link> <Link href="/submitCollection">submit collection</Link> ... <button onClick={handleClick} >press to set account</button> ... {account?(<p>{account}</p>):(<p>u need to set an accout</p>)} ) }cuando visito mi casa usando el enlace de la barra de navegación, la cuenta vuelve a estar configurada como indefinida y necesito presionar el botón nuevamente para configurarla. ¿Cómo puedo hacer que la cadena permanezca establecida? como persistir en la barra de navegación
useState no es persistente, está vinculado a su componente, para que persista, debe usar localStorage
const [account,_setAccount] = useState(); const setAccount = (val) => { _setAccount(val); localStorage.setItem('account', val); } useEffect(() => { const storedAccount = localStorage.getItem('account'); if (storedAccount) _setAccount(storedAccount); }, []) const handleClick = () => { setAccount(randomNumberThatIHaveGenerated) } useEffect se llama cuando el componente se procesa, verifica la cuenta almacenada y la muestra.
Y observe cómo reimplementamos setAccount , de modo que cada vez que se llame, actualicemos localStorage.
También puede crear un enlace personalizado con esta lógica, para que el componente se vea más limpio. O incluso mejor, usa algo como use-state-persist
Puedes resolver este problema usando localstorage y useEffect
Agregar este fragmento de código a su trabajo hará el truco
const [account,setAccount] = useState(localStorage.getItem('account') ?localStorage.getItem('account') : null) useEffect(()=>{ localstorage.setItem(account) },[account])Por ejemplo
const [account,setAccount] = useState(localStorage.getItem('account') ?localStorage.getItem('account') : null) useEffect(()=>{ localStorage.setItem('account',account) },[account]) const handleClick = () => { setAccount(randomNumberThatIHaveGenerated) }Espero haber ayudado