¿Cómo renderizo en función de los datos en localStorage? LocalStorage tiene un par clave-valor (ubicación: EE. UU. o Ubicación: AU) y se agrega cuando el usuario lo visita.
import React, { useEffect, useState} from 'react'; let localUserLoc = userLoc; //works fine when I set this variable to 'US' or 'AU' const LoadSections= (props) => { const { sections, className } = props; const [userLoc, setUserLoc] = useState(JSON.stringify(localStorage.getItem('userLoc')) || ''); useEffect(() => { const userLoc = JSON.stringify(localStorage.getItem('userLoc')); setUserLoc(userLoc); }, []); useEffect(() => { getUserLoc = userLoc; }, [userLoc]); // // console.log(local1, 'outside'); console.log(abTestType, '4 - outside'); return ( <Wrapper className={className}> {sections.map((section, sectionIndex) => { const userLocProp = section.userLoc; if (userLocProp === localUserLoc) { return <SomeComp /> } else if (userLocProp === 'undefined') { return <AnotherComp /> }El código anterior solo carga si configuro manualmente localUserLoc en 'US' o 'AU'. Sin embargo, cuando trato de actualizar la variable desde localStorage, no se muestra.
Creo que es porque LocalStorage se lee pero no se representa. Intenté usar dos ganchos UseEffect y agregué el primero como una dependencia, pero fue en vano.
¿Cómo puedo leer y luego establecer la variable localUserLoc en lo que sea que esté en localStorage y representar el componente relevante?
No funciona porque está usando JSON.stringify después de obtener el valor de localStorage pero el valor almacenado en localStorage ya es una cadena porque localStorage solo puede almacenar valores de cadena.
Por lo tanto, debe usar JSON.parse para obtener el valor de localStorage y convertirlo en un javascript object .
const [userLoc, setUserLoc] = useState(JSON.parse(localStorage.getItem('userLoc'))